From 54071259576329403e795193587c9af38bfe2a86 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sun, 3 Nov 2019 11:09:24 +0100
Subject: [PATCH] tabler layout, sidebar, nav

---
 pages/_includes/layout/menu.html    |  2 +-
 pages/_includes/layout/sidenav.html | 11 +++----
 pages/_includes/layout/topmenu.html |  2 +-
 pages/_includes/layout/topnav.html  |  2 +-
 pages/_layouts/default.html         | 14 +++-----
 pages/layout-test.html              |  2 +-
 scss/layout/_core.scss              |  5 ---
 scss/layout/_layout.scss            | 51 +++++++++++++++++++++++++++++
 scss/layout/_navbar.scss            |  5 +++
 scss/layout/_sidenav.scss           | 35 +++++++++++---------
 scss/tabler.scss                    |  1 +
 11 files changed, 89 insertions(+), 41 deletions(-)
 create mode 100644 scss/layout/_layout.scss

diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index a5296716..aecdba54 100644
--- a/pages/_includes/layout/menu.html
+++ b/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 %}
diff --git a/pages/_includes/layout/sidenav.html b/pages/_includes/layout/sidenav.html
index 28a17dfd..59496c0f 100644
--- a/pages/_includes/layout/sidenav.html
+++ b/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">
-
-   {% comment %}
-   {% unless include.empty %}
-   {% include layout/sidenav-content.html menu=menu dark=include.dark %}
-   {% endunless %}
-   {% endcomment %}
+<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">
+      {% include layout/sidenav-content.html menu=menu dark=include.dark %}
+   </div>
 </aside>
diff --git a/pages/_includes/layout/topmenu.html b/pages/_includes/layout/topmenu.html
index a3ac47fc..1c0d46c3 100644
--- a/pages/_includes/layout/topmenu.html
+++ b/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>
diff --git a/pages/_includes/layout/topnav.html b/pages/_includes/layout/topnav.html
index 45b3a3e7..62a2b5a5 100644
--- a/pages/_includes/layout/topnav.html
+++ b/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>
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 8fde7529..d05b98e5 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -2,18 +2,12 @@
 layout: base
 ---
 
-<div class="layout d-flex flex-row h-100p">
-   {% 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="layout{% if page.site-layout %} {{ page.site-layout }}{% 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">
-      {% unless page.sidenav %}
-      {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
-      {% include layout/topmenu.html %}
-      {% endunless %}
+   <div class="layout-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 %}
diff --git a/pages/layout-test.html b/pages/layout-test.html
index ab5eca4f..222ae946 100644
--- a/pages/layout-test.html
+++ b/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">
diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss
index d2683b3b..08333bf2 100644
--- a/scss/layout/_core.scss
+++ b/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.
  */
diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss
new file mode 100644
index 00000000..ca8fd827
--- /dev/null
+++ b/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;
+}
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 40f3ccc8..f87647c9 100644
--- a/scss/layout/_navbar.scss
+++ b/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;
 
diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss
index 5f9dd3cc..b65b8b33 100644
--- a/scss/layout/_sidenav.scss
+++ b/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,16 +52,16 @@ $breakpoints: $grid-breakpoints;
   width: $sidenav-width;
   min-width: $sidenav-width;
 
-  & ~ .layout-main {
-    padding-left: $sidenav-width;
+  &:not(.sidenav-right) ~ .layout-main {
+    //padding-left: $sidenav-width;
   }
 
-  & ~ .sidenav-overlay {
-    display: none !important;
+  &.sidenav-right ~ .layout-main {
+    //padding-right: $sidenav-width;
   }
 
-  &:before {
-    content: 'sidenav'
+  & ~ .sidenav-overlay {
+    display: none !important;
   }
 }
 
@@ -65,16 +70,16 @@ $breakpoints: $grid-breakpoints;
   width: $sidenav-folded-width;
   min-width: $sidenav-folded-width;
 
-  & ~ .layout-main {
-    padding-left: $sidenav-folded-width;
+  &:not(.sidenav-right) ~ .layout-main {
+    //padding-left: $sidenav-folded-width;
   }
 
-  & ~ .sidenav-overlay {
-    display: none !important;
+  &.sidenav-right ~ .layout-main {
+    //padding-right: $sidenav-folded-width;
   }
 
-  &:before {
-    content: 'sidenav-folded'
+  & ~ .sidenav-overlay {
+    display: none !important;
   }
 }
 
@@ -103,7 +108,7 @@ Sidebar
   /*
   Right navbar
    */
-  &.navbar-right {
+  &.sidenav-right {
     order: 9;
     box-shadow: -1px 0 $sidenav-border-color;
   }
diff --git a/scss/tabler.scss b/scss/tabler.scss
index 7b3a0b89..1682176c 100644
--- a/scss/tabler.scss
+++ b/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";
-- 
GitLab