tabler layout, sidebar, nav

pages/_includes/layout/menu.html

@@ -1,6 +1,6 @@
 {% removeemptylines %}
 {% assign side = false %}
-<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
+<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
    {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}

pages/_includes/layout/sidenav.html

@@ -1,9 +1,6 @@
 {% assign menu = page.menu | default: layout.menu %}
-<aside class="sidenav {% if include.class %} {{ include.class }}{% endif %} {% if include.dark %}sidenav-dark bg-dark text-white{% else %}sidenav-light{% endif %}{% if include.fixed %} sidenav-fixed{% endif %}{% if include.right %} sidenav-right{% endif %}{% if include.folded %} sidenav-folded{% endif %} js-sidebar" id="sidebar">
+<aside class="layout-menubar {% if include.class %} {{ include.class }}{% endif %} {% if include.dark %}sidenav-dark bg-dark text-white{% else %}sidenav-light{% endif %}{% if include.fixed %} sidenav-fixed{% endif %}{% if include.right %} sidenav-right{% endif %}{% if include.folded %} sidenav-folded{% endif %} js-sidebar" id="sidebar">
-
+   <div class="container">
-   {% comment %}
+      {% include layout/sidenav-content.html menu=menu dark=include.dark %}
-   {% unless include.empty %}
+   </div>
-   {% include layout/sidenav-content.html menu=menu dark=include.dark %}
-   {% endunless %}
-   {% endcomment %}
 </aside>

pages/_includes/layout/topmenu.html

@@ -1,4 +1,4 @@
-<div class="d-none d-lg-block navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %} navbar-expand-lg">
+<div class="layout-menubar navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
    <div class="container">
       {% include layout/menu.html top=true %}
    </div>

pages/_includes/layout/topnav.html

@@ -1,4 +1,4 @@
-<header class="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-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

@@ -2,18 +2,12 @@
 layout: base
 ---
 
-<div class="layout d-flex flex-row h-100p">
+<div class="layout{% if page.site-layout %} {{ page.site-layout }}{% endif %}">
-   {% if page.sidenav %}
-   {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded right=page.sidenav-right class=page.sidenav-class %}
-   {% endif %}
 
-   <div class="sidenav-overlay" data-toggle="sidenav"></div>
+   {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
+   {% include layout/topmenu.html %}
 
-   <div class="layout-main d-flex flex-column flex-fill max-w-full">
+   <div class="layout-main">
-      {% unless page.sidenav %}
-      {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
-      {% include layout/topmenu.html %}
-      {% endunless %}
 
       <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

@@ -1,8 +1,8 @@
 ---
 title: Layout test
-sidenav-class: sidenav-expanded-xl sidenav-folded-md
 sidenav: true
 sidenav-dark: true
+site-layout: layout-with-sidebar-lg layout-with-sidebar-folded-md
 ---
 
 <div class="card" id="card-test">

scss/layout/_core.scss

@@ -27,11 +27,6 @@ body *:hover::-webkit-scrollbar-thumb {
   background: $gray-500;
 }
 
-.layout {
-  position: relative;
-  outline: 1px solid red;
-}
-
 /**
 Remove the cancel buttons in Chrome and Safari on macOS.
  */

scss/layout/_layout.scss

@@ -0,0 +1,51 @@
+$breakpoints: $grid-breakpoints;
+
+
+
+.layout {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto;
+}
+
+.layout-with-sidebar {
+  display: none;
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+
+      &#{$infix} {
+        .layout-menubar {
+          width: $sidenav-width;
+          grid-column: 1;
+          grid-row: 1 / 10;
+        }
+      }
+
+      &-folded#{$infix} {
+        .layout-menubar {
+          width: $sidenav-folded-width;
+          grid-column: 1;
+          grid-row: 1 / 10;
+        }
+      }
+    }
+  }
+}
+
+.layout-topnav {
+  grid-column: 2/ none;
+}
+
+.layout-menubar {
+  grid-column: 2;
+  grid-row: 2 / none;
+}
+
+.layout-main {
+  grid-column: 2;
+  grid-row: 4;
+}

scss/layout/_navbar.scss

@@ -16,6 +16,11 @@ Navbar logo
   margin-right: -($navbar-padding-x);
   margin-left: -($navbar-padding-x);
 
+  .nav-link {
+    padding-left: $navbar-nav-link-padding-x;
+    padding-right: $navbar-nav-link-padding-x;
+  }
+
   .nav-item.active .nav-link {
     position: relative;
 

scss/layout/_sidenav.scss

@@ -28,17 +28,22 @@ $breakpoints: $grid-breakpoints;
   transform: translateX(-100%);
   transition: .3s opacity, .3s transform;
   will-change: transform;
-
   width: $sidenav-width;
   min-width: $sidenav-width;
 
+  &.sidenav-right {
+    left: auto;
+    right: 0;
+    transform: translateX(100%);
+  }
+
   body.show-sidenav & {
     @include sidenav-visible-common;
   }
 }
 
 @mixin sidenav-visible-common {
-  transform: translateX(0);
+  transform: translateX(0) !important;
   opacity: 1;
 }
 
@@ -47,17 +52,17 @@ $breakpoints: $grid-breakpoints;
   width: $sidenav-width;
   min-width: $sidenav-width;
 
-  & ~ .layout-main {
+  &:not(.sidenav-right) ~ .layout-main {
-    padding-left: $sidenav-width;
+    //padding-left: $sidenav-width;
+  }
+
+  &.sidenav-right ~ .layout-main {
+    //padding-right: $sidenav-width;
   }
 
   & ~ .sidenav-overlay {
     display: none !important;
   }
-
-  &:before {
-    content: 'sidenav'
-  }
 }
 
 @mixin sidenav-folded {
@@ -65,17 +70,17 @@ $breakpoints: $grid-breakpoints;
   width: $sidenav-folded-width;
   min-width: $sidenav-folded-width;
 
-  & ~ .layout-main {
+  &:not(.sidenav-right) ~ .layout-main {
-    padding-left: $sidenav-folded-width;
+    //padding-left: $sidenav-folded-width;
+  }
+
+  &.sidenav-right ~ .layout-main {
+    //padding-right: $sidenav-folded-width;
   }
 
   & ~ .sidenav-overlay {
     display: none !important;
   }
-
-  &:before {
-    content: 'sidenav-folded'
-  }
 }
 
 /*
@@ -103,7 +108,7 @@ Sidebar
   /*
   Right navbar
    */
-  &.navbar-right {
+  &.sidenav-right {
     order: 9;
     box-shadow: -1px 0 $sidenav-border-color;
   }

scss/tabler.scss

@@ -11,6 +11,7 @@
 @import "fonts/webfonts";
 
 @import "layout/core";
+@import "layout/layout";
 @import "layout/navbar";
 @import "layout/sidenav";
 @import "layout/page";