folded navbar responsive

js/demo.js

@@ -135,6 +135,7 @@ class TablerDemo {
   };
 
   toggleSidebarColor(color) {
+    console.log('color', color);
     return this.setConfig('sidebarColor', color, ['dark', 'light'], () => {
       if (color === 'dark') {
         document.querySelector('.js-sidebar').classList.add('navbar-dark');

pages/_includes/layout/sidenav.html

 {% assign menu = page.menu | default: layout.menu %}
-<aside class="d-none d-lg-flex navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
+<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
    {% include layout/sidenav-content.html menu=menu %}
 </aside>
+<div class="navbar-bg"></div>

pages/_layouts/default.html

@@ -8,7 +8,7 @@ layout: base
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
 
-      <div class="d-none d-lg-flex navbar navbar-expand-md">
+      <div class="navbar navbar-expand-md">
          <div class="container">
             {% include layout/menu.html top=true %}
          </div>

scss/layout/_navbar.scss

@@ -206,29 +206,60 @@ Sidebar
 Fixed navbar
  */
 .navbar-fixed {
-  position: fixed;
   top: 0;
   bottom: 0;
 
-  @include media-breakpoint-up(xl) {
-    & + .layout-main {
-      margin-left: $sidenav-width;
-    }
-
-    &.navbar-right + .layout-main {
-      margin-left: 0;
-      margin-right: $sidenav-width;
-    }
+  + .navbar-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba($dark, .2);
+    z-index: $zindex-dropdown;
+    display: none;
   }
+}
+
+/*
+Responsive utils
+ */
+.navbar {
+  &.navbar-side {
+    display: none;
+    outline: 1px solid red;
+
+    @include media-breakpoint-up(xl) {
+      display: flex;
+
+      outline: 3px solid orange;
 
-  @include media-breakpoint-up(lg) {
-    &.navbar-folded + .layout-main {
-      margin-left: $sidenav-folded-width;
+      & ~ .layout-main {
+        margin-left: $sidenav-width;
+      }
+
+      &.navbar-right ~ .layout-main {
+        margin-left: 0;
+        margin-right: $sidenav-width;
+      }
     }
 
-    &.navbar-right.navbar-folded + .layout-main {
-      margin-left: 0;
-      margin-right: $sidenav-folded-width;
+    &.navbar-folded {
+      display: flex;
+
+      @include media-breakpoint-up(lg) {
+
+        outline: 3px solid yellow;
+
+        & ~ .layout-main {
+          margin-left: $sidenav-folded-width;
+        }
+
+        &.navbar-right ~ .layout-main {
+          margin-left: 0;
+          margin-right: $sidenav-folded-width;
+        }
+      }
     }
   }
 }
@@ -362,7 +393,6 @@ Utils
   }
 }
 
-
 .navbar-toggler-icon {
   outline: 1px solid red;
 }