side layout fixes

js/tabler.js

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

package.json

@@ -4,12 +4,11 @@
   "version_short": "0.9",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
-    "start": "npm-run-all clean css-main js-compile-standalone --parallel html-watch browsersync watch",
+    "start": "npm-run-all clean css-main js-compile-standalone --parallel watch-html browsersync watch",
     "build": "npm-run-all clean html-build css js assets-copy",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
     "assets-copy": "mkdir -p dist-demo/dist && cp -R dist/* dist-demo/dist/ && cp -R static/* dist-demo/",
-    "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch",
     "html-build": "JEKYLL_ENV=production bundle exec jekyll build --destination dist-demo",
     "lint": "npm-run-all --parallel js-lint css-lint",
     "clean": "rm -rf dist && mkdir dist && mkdir dist/css && mkdir dist/js",
@@ -23,6 +22,7 @@
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"npm run js-compile-standalone\"",
+    "watch-html": "JEKYLL_ENV=development bundle exec jekyll build --watch",
     "js": "npm-run-all --sequential js-compile js-libs",
     "js-libs": "rm -rf dist/libs && mkdir dist/libs && node build/copy-libs.js",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache js build/",
@@ -75,7 +75,7 @@
     "icon-font-generator": "2.1.10",
     "node-sass": "4.13.0",
     "node-sass-package-importer": "5.3.2",
-    "nodemon": "2.0.1",
+    "nodemon": "^2.0.1",
     "npm-run-all": "4.1.5",
     "postcss-cli": "6.1.3",
     "rollup": "1.27.5",

pages/_includes/parts/navbar.html

@@ -1,8 +1,8 @@
 {% assign person-id = include.person-id | default: 12 | minus: 1 %}
 {% assign person = site.data.people[person-id] %}
 
-<a class="navbar-toggler" data-toggle="modal" data-target="#aside">
-   <span class="navbar-toggler-icon"></span>
+<a class="layout-toggler" data-toggle="menubar">
+   <span class="layout-toggler-icon"></span>
 </a>
 
 <a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">

pages/index.html

@@ -3,7 +3,7 @@ title: Dashboard
 page-title: Dashboard
 page-pretitle: Overview
 page-title-actions: true
-site-layout: layout-collapsed-sm
+site-layout: layout-collapsed-md
 menu: home
 ---
 

scss/layout/_layout.scss

@@ -1,7 +1,6 @@
 /**
 Layout
  */
-
 @mixin menu-side {
   align-items: flex-start;
 }
@@ -34,7 +33,11 @@ Layout
     opacity: 0;
   }
 
-  @at-root body.menu-visible & {
+  .layout-toggler {
+    display: block;
+  }
+
+  @at-root body.aside-visible & {
     .layout-area-menu {
       left: 0;
     }
@@ -50,10 +53,7 @@ Layout
   position: relative;
   display: grid;
 
-  grid-template:
-    "head" auto
-    "menu" auto
-    "main" auto /
+  grid-template: "head" auto "menu" auto "main" auto /
     100%;
 }
 
@@ -79,12 +79,12 @@ Layout
     $infix: breakpoint-infix($breakpoint);
 
     @include media-breakpoint-up($breakpoint) {
-
+      .layout-toggler {
+        display: none;
+      }
 
       &#{$infix} {
-        grid-template:
-          "menu head" auto
-          "menu main" auto /
+        grid-template: "menu head" auto "menu main" auto /
           auto 1fr;
 
         .layout-area-menu {
@@ -93,22 +93,80 @@ Layout
       }
 
       &-folded#{$infix} {
-        grid-template:
-          "menu head" auto
-          "menu main" auto /
+        grid-template: "menu head" auto "menu main" auto /
           auto 1fr;
 
         .layout-area-menu {
           width: $sidenav-folded-width;
-
         }
       }
     }
   }
 }
 
+.layout-toggler {
+  display: none;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+  position: relative;
+  opacity: .8;
+
+  &-icon {
+    top: 50%;
+    left: 50%;
+    display: block;
+    margin-top: -2px;
+    margin-left: -.75rem;
+
+    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+    transition-duration: 75ms;
+
+    &,
+    &:after,
+    &:before {
+      content: '';
+      width: 1.5rem;
+      height: 2px;
+      background: currentColor;
+      position: absolute;
+      border-radius: 4px;
+    }
+
+    &:before {
+      top: -.5rem;
+      transition: top 75ms ease .12s, opacity 75ms ease;
+    }
+
+    &:after {
+      bottom: -.5rem;
+      transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    }
+
+    @at-root body.aside-visible & {
+      transform: rotate(45deg);
+      transition-delay: .12s;
+      transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+
+      &:before {
+        top: 0;
+        transition: top 75ms ease, opacity 75ms ease .12s;
+        opacity: 0;
+      }
+
+      &:after {
+        bottom: 0;
+        transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+
 .layout-area-topnav {
   grid-area: head;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .layout-area-menu {