tabler layout rebuild

build/postcss.config.js

@@ -17,7 +17,8 @@ module.exports = ctx => ({
     },
   plugins: {
     autoprefixer: {
-      cascade: false
+      cascade: false,
+      grid: "autoplace"
     }
   }
 });

js/tabler.js

@@ -108,8 +108,8 @@ const tabler = {
 $(document).ready(function() {
   const $body = $('body');
 
-  $body.on('click', '[data-toggle="sidebar"]', function(e) {
-    $body.toggleClass('sidebar-opened');
+  $body.on('click', '[data-toggle="menubar"]', function(e) {
+    $body.toggleClass('menu-visible');
 
     e.preventDefault();
     return false;

pages/_includes/layout/topmenu.html

@@ -1,5 +1,6 @@
-<div class="layout-menubar navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
+<div class="layout-area-menu navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
    <div class="container">
       {% include layout/menu.html top=true %}
    </div>
 </div>
+<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>

pages/_includes/layout/topnav.html

@@ -1,4 +1,4 @@
-<header class="layout-topnav navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
+<header class="layout-area-topnav navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
    <div class="container{% if include.fluid %} container-fluid{% endif %}">
       {% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark notifications=true %}
    </div>

pages/_layouts/default.html

@@ -7,7 +7,7 @@ layout: base
    {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
    {% include layout/topmenu.html %}
 
-   <div class="layout-main">
+   <div class="layout-area-main">
 
       <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
          {% include layout/page-title.html %}

pages/layout-test.html

@@ -2,12 +2,12 @@
 title: Layout test
 sidenav: true
 sidenav-dark: true
-site-layout: layout-with-sidebar-lg layout-with-sidebar-folded-md
+site-layout: layout-collapsed-sm
 ---
 
 <div class="card" id="card-test">
    <div class="card-body">
-      <a href="#" class="btn btn-secondary btn-block" data-toggle="sidenav">sidebar</a>
+      <a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>
       <div id="card-body"></div>
       <div>
          <h1>Well, she turned me into a newt.</h1>
@@ -54,10 +54,6 @@ site-layout: layout-with-sidebar-lg layout-with-sidebar-folded-md
 		$(window).on('resize', function () {
 			test_width();
 		});
-
-		$('[data-toggle="sidenav"]').on('click', function () {
-         $('body').toggleClass('show-sidenav');
-		});
 	});
 </script>
 {% endcapture_global %}

scss/_variables.scss

@@ -182,14 +182,6 @@ $generate-colors: true !default;
 
 $enable-gradients: false !default;
 
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1280px
-) !default;
-
 $container-max-widths: (
   sm: 540px,
   md: 720px,
@@ -255,7 +247,14 @@ $dropdown-link-hover-bg: $hover-bg !default;
 $dropdown-link-hover-color: inherit !default;
 
 //grid
-$grid-gutter-width: 2rem !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1280px
+) !default;
 
 //loader
 $loader-size: 2.5rem !default;

scss/layout/_layout.scss

@@ -1,51 +1,126 @@
-$breakpoints: $grid-breakpoints;
+/**
+Layout
+ */
 
+@mixin menu-side {
+  align-items: start;
+}
 
+@mixin menu-collapsed {
+  .layout-area-menu {
+    position: fixed;
+    left: -($sidenav-width);
+    top: 0;
+    bottom: 0;
+    background: $dark;
+    color: $white;
+    width: $sidenav-width;
+    z-index: $zindex-fixed;
+    transition: .3s left;
+
+    @include menu-side;
+  }
+
+  .layout-area-menu-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    background: rgba($dark, .1);
+    z-index: $zindex-fixed - 1;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  @at-root body.menu-visible & {
+    .layout-area-menu {
+      left: 0;
+    }
+
+    .layout-area-menu-backdrop {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
 
 .layout {
   position: relative;
   display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto;
+
+  grid-template:
+    "head" auto
+    "menu" auto
+    "main" auto /
+    auto;
 }
 
-.layout-with-sidebar {
-  display: none;
+.layout-collapsed {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
 
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
+    @debug $infix;
 
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
+    @if $infix != '' {
+      @include media-breakpoint-down($breakpoint) {
 
         &#{$infix} {
-        .layout-menubar {
+          @include menu-collapsed;
+        }
+      }
+    } @else {
+      @include menu-collapsed;
+    }
+  }
+}
+
+.layout-sidebar {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
+
+    @include media-breakpoint-up($breakpoint) {
+
+
+      &#{$infix} {
+        grid-template:
+          "menu head" auto
+          "menu main" auto /
+          auto 1fr;
+
+        .layout-area-menu {
           width: $sidenav-width;
-          grid-column: 1;
-          grid-row: 1 / 10;
         }
       }
 
       &-folded#{$infix} {
-        .layout-menubar {
+        grid-template:
+          "menu head" auto
+          "menu main" auto /
+          auto 1fr;
+
+        .layout-area-menu {
           width: $sidenav-folded-width;
-          grid-column: 1;
-          grid-row: 1 / 10;
+
         }
       }
     }
   }
 }
 
-.layout-topnav {
-  grid-column: 2/ none;
+.layout-area-topnav {
+  grid-area: head;
 }
 
-.layout-menubar {
-  grid-column: 2;
-  grid-row: 2 / none;
+.layout-area-menu {
+  grid-area: menu;
 }
 
-.layout-main {
-  grid-column: 2;
-  grid-row: 4;
+.layout-area-menu-backdrop {
+  display: none;
+}
+
+.layout-area-main {
+  grid-area: main;
 }

scss/layout/_navbar.scss

@@ -28,7 +28,7 @@ Navbar logo
       content: '';
       position: absolute;
 
-      bottom: calc(-#{$navbar-padding-y} - 1px);
+      bottom: subtract(-$navbar-padding-y, 1px);
       right: $navbar-nav-link-padding-x;
       left: $navbar-nav-link-padding-x;
       border-bottom: 1px solid $primary;

scss/ui/_lists.scss

@@ -56,7 +56,7 @@
       position: absolute;
       top: 0;
       bottom: 0;
-      left: calc(7.5rem + 2px);
+      left: add(7.5rem, 2px);
       z-index: 1;
       display: block;
       width: 4px;

scss/ui/_steps.scss

@@ -2,10 +2,10 @@
 
 @mixin step-size($border-width, $dot-size: 1rem) {
   .step-item {
-    padding-top: calc(#{$dot-size} + 4px);
+    padding-top: add($dot-size, 4px);
 
     &::after {
-      top: calc(#{$dot-size / 2} + 2px);
+      top: add($dot-size / 2, 2px);
       height: $border-width;
     }