blue-web 1.5.0 → 1.6.1

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.5.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.6.1 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 

package/dist/styles/_grid-layout.scss

@@ -16,14 +16,16 @@
     height: 100dvh;
 }
 
-@media (min-width: 600px) {
-    .blue-grid-layout {
-        grid-template-columns: $normal-size auto;
+@if $sidebar-shrink {
+    @media (min-width: $sidebar-shrink-breakpoint) {
+        .blue-grid-layout {
+            grid-template-columns: $normal-size auto;
+        }
     }
 }
 
-@media (min-width: 1400px) {
-    .blue-grid-layout {
+@media (min-width: $sidebar-expanded-breakpoint) {
+    .blue-grid-layout.expandSidebar {
         grid-template-columns: var(--blue-sidebar-width) auto;
     }
 }

package/dist/styles/_layout.scss

@@ -24,7 +24,7 @@
     }
 
     &.open {
-        @media screen and (max-width: 1400px) {
+        @media screen and (max-width: $sidebar-expanded-breakpoint) {
             .router-page.active {
                 .blue-page {
                     filter: blur(3px) brightness(0.8);
@@ -150,45 +150,60 @@
     }
 }
 
-@include blue-sidebar($normal-size);
+@include blue-sidebar(0);
+.blue-layout:not(.open) .blue-sidebar {
+    left: -$normal-size;
+}
 
-@media (max-width: 600px) {
-    @include blue-sidebar(0);
-    .blue-layout:not(.open) .blue-sidebar {
-        left: -$normal-size;
-    }
+.blue-page {
+    margin-left: 0;
+}
 
+.blue-layout.disableHeaders {
     .blue-page {
-        margin-left: 0;
+        padding-top: $normal-size;
     }
+}
 
-    .blue-layout.disableHeaders {
-        .blue-page {
-            padding-top: $normal-size;
-        }
+.blue-sidebar-toggler {
+    transition: transform 0.5s;
+
+    @media (prefers-reduced-motion) {
+        transition: none;
     }
+}
+
+.blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
+    transform: translate(0.25rem, 0.25rem);
+    border-radius: $border-radius;
+    overflow: hidden;
+}
 
-    .blue-sidebar-toggler {
-        transition: transform 0.5s;
+@if $sidebar-shrink {
+    @media (min-width: $sidebar-shrink-breakpoint) {
+        @include blue-sidebar($normal-size);
 
-        @media (prefers-reduced-motion) {
-            transition: none;
+        .blue-layout:not(.open) .blue-sidebar {
+            left: 0;
         }
-    }
 
-    .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
-        transform: translate(0.25rem, 0.25rem);
-        border-radius: $border-radius;
+        .blue-page {
+            margin-left: $normal-size;
+        }
+
+        .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
+            transform: translate(0, 0);
+        }
     }
 }
 
-@media (min-width: 1400px) {
+@media (min-width: $sidebar-expanded-breakpoint) {
     .blue-layout.expandSidebar {
         @include openSidebarMenu();
 
         .blue-sidebar {
+            left: 0;
             box-shadow: none !important;
-            // background: transparent;
         }
 
         .blue-page {

package/dist/styles/_variables.scss

@@ -89,6 +89,15 @@ $actions-control-bg-hover: $bla-button-bg-hover !default;
 // Width and height of the scrollbar indicators
 $scrollbar-size: 10px;
 
+// Shrink sidebar on smaller screens
+$sidebar-shrink: true !default;
+
+// Breakpoint for sidebar shrink
+$sidebar-shrink-breakpoint: 600px !default;
+
+// Breakpoint for sidebar fully expanded
+$sidebar-expanded-breakpoint: 1400px !default;
+
 :root {
     --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
     --blue-scrollbar-size: #{$scrollbar-size};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.5.0",
+    "version": "1.6.1",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "homepage": "https://bruegmann.github.io/blue-web/v1",