From 2b24230dfdc984d8f123674d76c1ae0d5c799c48 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 28 Oct 2019 10:51:40 +0100
Subject: [PATCH] navigation refactoring

---
 js/tabler.js                                  |   2 -
 js/tabler/dropdowns.js                        |   7 -
 pages/_data/layouts.yml                       |  24 +
 pages/_data/menu.yml                          |  43 +-
 pages/_includes/layout/layouts.html           |   9 +
 pages/_includes/layout/menu.html              |  85 ++--
 pages/_includes/layout/sidenav-content.html   |  18 +-
 pages/_includes/layout/sidenav.html           |   5 +-
 pages/_includes/layout/topnav.html            |   2 +-
 pages/_layouts/default.html                   |   9 +-
 pages/layout-dark-mode.html                   |   2 +
 pages/layout-header-dark.html                 |   2 +
 pages/layout-header-sticky.html               |   2 +
 ...bar-white.html => layout-navbar-dark.html} |   5 +-
 pages/layout-navbar-folded.html               |   8 +-
 pages/layout-navbar-left.html                 |   5 +-
 pages/layout-navbar-right.html                |   6 +-
 pages/layout-navbar-top.html                  |   2 +
 pages/layouts.html                            |   6 +
 scss/layout/_navbar.scss                      | 441 ++++++++++--------
 scss/ui/_nav.scss                             |   4 +
 21 files changed, 360 insertions(+), 327 deletions(-)
 delete mode 100644 js/tabler/dropdowns.js
 create mode 100644 pages/_data/layouts.yml
 create mode 100644 pages/_includes/layout/layouts.html
 rename pages/{layout-navbar-white.html => layout-navbar-dark.html} (50%)
 create mode 100644 pages/layouts.html

diff --git a/js/tabler.js b/js/tabler.js
index e3fef4ec..ebb6324a 100644
--- a/js/tabler.js
+++ b/js/tabler.js
@@ -1,5 +1,3 @@
-require('./tabler/dropdowns');
-
 const tabler = {
   colorVariation: function(color, variation) {
     const colorValue = this.colors[color];
diff --git a/js/tabler/dropdowns.js b/js/tabler/dropdowns.js
deleted file mode 100644
index af4b3e10..00000000
--- a/js/tabler/dropdowns.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-(function(){
-  let dropdown = document.querySelectorAll('.dropup, .dropright, .dropdown, .dropleft'),
-    dropdownToggle = document.querySelectorAll('.dropdown-menu .dropdown-toggle');
-
-})();
diff --git a/pages/_data/layouts.yml b/pages/_data/layouts.yml
new file mode 100644
index 00000000..b04b6fda
--- /dev/null
+++ b/pages/_data/layouts.yml
@@ -0,0 +1,24 @@
+- name: sidebar-left
+  title: Left sidebar
+  url: layout-navbar-left.html
+- name: sidebar-right
+  title: Right sidebar
+  url: layout-navbar-right.html
+- name: sidebar-dark
+  title: Dark sidebar
+  url: layout-navbar-dark.html
+- name: sidebar-folded
+  title: Folded sidebar
+  url: layout-navbar-folded.html
+- name: navbar-top
+  title: Navbar top
+  url: layout-navbar-top.html
+- name: header-dark
+  title: Dark header
+  url: layout-header-dark.html
+- name: header-sticky
+  title: Sticky header
+  url: layout-header-sticky.html
+- name: dark-mode
+  title: Dark mode
+  url: layout-dark-mode.html
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 60330347..20806533 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -18,47 +18,10 @@ charts:
   title: Charts
   icon: pie-chart
 
-level-1:
-  title: Level 1
-  icon: menu
-  children:
-    level-2:
-      title: Level 2
-      children:
-        level-3:
-          title: Level 3
-          children:
-            level-4:
-              title: Level 4
-
-layout:
-  title: Layout
+layouts:
+  title: Layouts
   icon: layout
-  children:
-    sidebar-left:
-      title: Left sidebar
-      url: layout-navbar-left.html
-    sidebar-right:
-      title: Right sidebar
-      url: layout-navbar-right.html
-    sidebar-white:
-      title: White sidebar
-      url: layout-navbar-white.html
-    sidebar-folded:
-      title: Folded sidebar
-      url: layout-navbar-folded.html
-    navbar-top:
-      title: Navbar top
-      url: layout-navbar-top.html
-    header-dark:
-      title: Dark header
-      url: layout-header-dark.html
-    header-sticky:
-      title: Sticky header
-      url: layout-header-sticky.html
-    dark-mode:
-      title: Dark mode
-      url: layout-dark-mode.html
+  url: layouts.html
 
 docs:
   title: Documentation
diff --git a/pages/_includes/layout/layouts.html b/pages/_includes/layout/layouts.html
new file mode 100644
index 00000000..fb24140c
--- /dev/null
+++ b/pages/_includes/layout/layouts.html
@@ -0,0 +1,9 @@
+<div class="card">
+   <div class="card-body">
+      {% for layout in site.data.layouts %}
+      <a href="{{ layout.url }}" class="d-block">
+         {{ layout.title }}
+      </a>
+      {% endfor %}
+   </div>
+</div>
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index 52c0e27b..a5296716 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -1,11 +1,17 @@
 {% removeemptylines %}
+{% assign side = false %}
 <ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
    {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
-   <li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} dropdown{% endif %}">
-      <a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
+   <li
+      class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} {% if side %}dropright{% else %}dropdown{% endif %}{% endif %}">
+      <a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if
+         level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
+         aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
+         %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
+         %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
          <span class="nav-icon">
             {% include ui/icon.html icon=icon  %}
          </span>
@@ -20,75 +26,36 @@
          </span>
       </a>
       {% if level-1[1].children or level-1[1].docs %}
-      <ul class="dropdown-menu">
+      <div class="dropdown-menu">
 
          {% if level-1[1].docs %}
          {% for d in site.data.docs %}
          {% assign doc = site.docs | where: "slug", d.page | first %}
          {% if doc %}
-         <li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
-            <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
-               <span class="nav-text">
-                  {{ doc.title }}
+         <a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
+            <span class="nav-text">
+               {{ doc.title }}
 
-                  {% if doc.new %}
-                  <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
-                  {% endif %}
-               </span>
-            </a>
-         </li>
+               {% if doc.new %}
+               <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
+               {% endif %}
+            </span>
+         </a>
          {% endif %}
          {% endfor %}
          {% endif %}
 
          {% for level-2 in level-1[1].children %}
-         <li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}{% if level-2[1].children %} dropdown{% endif %}">
-            <a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
-               <span class="nav-text">
-                  {{ level-2[1].title }}
-                  {% if level-2[1].label %}
-                     <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
-                  {% endif %}
-               </span>
-            </a>
-            {% if level-2[1].children %}
-            <ul class="dropdown-menu">
-               {% for level-3 in level-2[1].children %}
-               <li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}">
-                  <a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
-                     <span class="nav-text">
-                        {{ level-3[1].title }}
-                        {% if level-3[1].label %}
-                           <span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
-                        {% endif %}
-                     </span>
-                  </a>
-
-                  {% if level-3[1].children %}
-                  <div class="navbar-subnav collapse">
-                     <ul class="nav nav-sm flex-column">
-                        {% for level-4 in level-3[1].children %}
-                        <li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
-                           <a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
-                              <span class="nav-text">
-                                 {{ level-4[1].title }}
-                                 {% if level-4[1].label %}
-                                    <span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
-                                 {% endif %}
-                              </span>
-                           </a>
-                        </li>
-                        {% endfor %}
-                     </ul>
-                  </div>
-                  {% endif %}
-               </li>
-               {% endfor %}
-            </ul>
-            {% endif %}
-         </li>
+         <a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
+            <span class="nav-text">
+               {{ level-2[1].title }}
+               {% if level-2[1].label %}
+                  <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
+               {% endif %}
+            </span>
+         </a>
          {% endfor %}
-      </ul>
+      </div>
       {% endif %}
    </li>
    {% endfor %}
diff --git a/pages/_includes/layout/sidenav-content.html b/pages/_includes/layout/sidenav-content.html
index b455404c..ee703fc3 100644
--- a/pages/_includes/layout/sidenav-content.html
+++ b/pages/_includes/layout/sidenav-content.html
@@ -1,21 +1,15 @@
 {% assign id = 0 | random_id %}
-<div class="pb-3">
-   <a href="{{ site.base }}" class="navbar-brand text-reset">
-      <img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
-      <img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
-   </a>
-</div>
+<a href="{{ site.base }}" class="navbar-brand">
+   <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
+   <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
+</a>
 
 <div class="flex-fill">
-   <h6 class="navbar-heading">
-      Docs
-   </h6>
+   <h6 class="navbar-heading">Docs</h6>
 
    {% include layout/menu.html menu=include.menu class="mb-md-4" %}
 
-   <h6 class="navbar-heading">
-      Other
-   </h6>
+   <h6 class="navbar-heading">Other</h6>
 
 </div>
 
diff --git a/pages/_includes/layout/sidenav.html b/pages/_includes/layout/sidenav.html
index 0e498e0d..54559d97 100644
--- a/pages/_includes/layout/sidenav.html
+++ b/pages/_includes/layout/sidenav.html
@@ -1,7 +1,6 @@
 {% assign menu = page.menu | default: layout.menu %}
-<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
+<aside class="navbar navbar-side {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar" id="sidebar">
    {% unless include.empty %}
-   {% include layout/sidenav-content.html menu=menu %}
+   {% include layout/sidenav-content.html menu=menu dark=include.dark %}
    {% endunless %}
 </aside>
-<div class="navbar-bg"></div>
diff --git a/pages/_includes/layout/topnav.html b/pages/_includes/layout/topnav.html
index b8657d0d..45b3a3e7 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{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
+<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 %}">
    <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 4171bc62..1aa40dac 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -2,13 +2,14 @@
 layout: base
 ---
 
-<div class="d-flex flex-row h-100p">
-   {% comment %}{% include layout/sidenav.html dark=true folded=false fixed=true %}{% endcomment %}
+<div class="layout d-flex flex-row vh-100">
+   {% if page.nav-side %}
+   {% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
+   {% endif %}
 
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
+      {% unless page.nav-side %}
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
-
-      {% unless page.nav-position == 'left' or page.nav-position == 'right'%}
       {% include layout/topmenu.html %}
       {% endunless %}
 
diff --git a/pages/layout-dark-mode.html b/pages/layout-dark-mode.html
index b2c60b6a..fc3a0f30 100644
--- a/pages/layout-dark-mode.html
+++ b/pages/layout-dark-mode.html
@@ -2,5 +2,7 @@
 title: Dark mode
 dark-theme: true
 page-title: Dashboard
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layout-header-dark.html b/pages/layout-header-dark.html
index 66ec4a66..a09ee05d 100644
--- a/pages/layout-header-dark.html
+++ b/pages/layout-header-dark.html
@@ -2,5 +2,7 @@
 title: Dark header
 header-dark: true
 page-title: Dashboard
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layout-header-sticky.html b/pages/layout-header-sticky.html
index 0c6b5a40..09d5b0c1 100644
--- a/pages/layout-header-sticky.html
+++ b/pages/layout-header-sticky.html
@@ -3,5 +3,7 @@ title: Sticky header
 menu: layout.header-sticky
 page-title: Dashboard
 header-sticky: true
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layout-navbar-white.html b/pages/layout-navbar-dark.html
similarity index 50%
rename from pages/layout-navbar-white.html
rename to pages/layout-navbar-dark.html
index 3f3efb2b..f453afff 100644
--- a/pages/layout-navbar-white.html
+++ b/pages/layout-navbar-dark.html
@@ -1,7 +1,10 @@
 ---
 title: Sidebar white
 menu: layout.sidebar-white
-nav-position: left
+nav-side: true
+nav-dark: true
 page-title: Dashboard
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layout-navbar-folded.html b/pages/layout-navbar-folded.html
index 49f8511f..85645a51 100644
--- a/pages/layout-navbar-folded.html
+++ b/pages/layout-navbar-folded.html
@@ -1,9 +1,11 @@
 ---
 title: Folded sidebar
 menu: layout.sidebar-folded
-nav-position: left
+nav-side: true
+nav-folded: true
+nav-dark: true
 page-title: Dashboard
-sidenav-folded: true
-sidenav-dark: true
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layout-navbar-left.html b/pages/layout-navbar-left.html
index 3134a4f5..b6d1726c 100644
--- a/pages/layout-navbar-left.html
+++ b/pages/layout-navbar-left.html
@@ -1,8 +1,9 @@
 ---
 title: Sidebar left
 menu: layout.sidebar-left
-nav-position: left
+nav-side: true
 page-title: Dashboard
-sidenav-dark: true
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layout-navbar-right.html b/pages/layout-navbar-right.html
index bec9bd4b..a5596797 100644
--- a/pages/layout-navbar-right.html
+++ b/pages/layout-navbar-right.html
@@ -1,8 +1,10 @@
 ---
 title: Sidebar right
 menu: layout.sidebar-right
-nav-position: right
+nav-side: true
+nav-right: true
 page-title: Dashboard
-sidenav-dark: true
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layout-navbar-top.html b/pages/layout-navbar-top.html
index dadcb0ca..d6efcdb2 100644
--- a/pages/layout-navbar-top.html
+++ b/pages/layout-navbar-top.html
@@ -1,5 +1,7 @@
 ---
 title: Navbar top
 page-title: Dashboard
+menu: layouts
 ---
 
+{% include layout/layouts.html %}
diff --git a/pages/layouts.html b/pages/layouts.html
new file mode 100644
index 00000000..59cfb614
--- /dev/null
+++ b/pages/layouts.html
@@ -0,0 +1,6 @@
+---
+page-title: Page Layouts
+menu: layouts
+---
+
+{% include layout/layouts.html %}
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 8b08b365..d656dc1f 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -2,6 +2,7 @@
   border-bottom: 1px solid;
   background-color: $navbar-bg;
   border-color: $navbar-border-color;
+  min-height: 4rem;
 }
 
 /**
@@ -25,7 +26,7 @@ Navbar logo
   .nav-item.active .nav-link {
     position: relative;
 
-    &:before {
+    &:after {
       content: '';
       position: absolute;
 
@@ -107,98 +108,176 @@ Navbar logo
 //  border: 0;
 //}
 //
-///*
-//Sidebar
-// */
-//.navbar-side {
-//  flex-direction: column;
-//  flex-wrap: nowrap;
-//  align-items: inherit;
-//  justify-content: start;
-//  width: $sidenav-width;
-//  min-width: $sidenav-width;
-//  margin: 0;
-//  overflow: auto;
-//  pointer-events: inherit;
-//  user-select: none;
-//  background: $sidenav-bg;
-//  border-right: 1px solid $sidenav-border-color;
-//
-//  .nav {
-//    flex-direction: column;
-//  }
-//
-//  .nav-link {
-//    display: flex;
-//    align-items: center;
-//    height: 2.5rem;
-//    padding: 0 $navbar-padding-x;
-//    color: $text-muted;
-//    box-shadow: inset 2px 0 0 0 transparent;
-//    transition: .3s background, .3s box-shadow;
-//
-//    &[aria-expanded="true"],
-//    &:hover {
-//      background: rgba($link-color, .04);
-//      border-color: $primary;
-//      box-shadow: inset 2px 0 0 0 $primary;
-//    }
-//
-//    > .icon {
-//      width: 2rem;
-//    }
-//
-//    &[data-toggle="collapse"] {
-//      &::after {
-//        display: block;
-//        margin-left: auto;
-//        font-family: $font-icons !important;
-//        content: "";
-//        transition: transform .3s;
-//      }
-//
-//      &[aria-expanded="true"]::after {
-//        transform: rotate(-180deg);
-//      }
-//    }
-//  }
-//
-//  &:not(.navbar-folded) {
-//    &[data-toggle="collapse"][aria-expanded="true"] {
-//      background: none;
-//      box-shadow: none;
-//    }
-//  }
-//
-//  &:not(.hide-navbar-folded) {
-//    //.nav-item .nav-item .nav-link {
-//    //  padding-left: 2.5rem;
-//    //}
-//    //
-//    //.nav-item .nav-item .nav-item .nav-link {
-//    //  padding-left: 3.5rem;
-//    //}
-//    //
-//    //.nav-item .nav-item .nav-item .nav-item .nav-link {
-//    //  padding-left: 4.5rem;
-//    //}
-//  }
-//
-//  .navbar-brand {
-//    height: 2.5rem;
-//    text-align: center;
-//  }
-//
-//  .navbar-heading {
-//    @include subheader;
-//    margin: 0 0 .5rem;
-//  }
-//
-//  .navbar-nav {
-//    flex-direction: column;
-//  }
-//}
-//
+
+$navbar-side-padding-x: 1rem;
+$navbar-side-padding-y: 1rem;
+$navbar-active-color: $primary;
+
+/*
+Sidebar
+ */
+.navbar-side {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: inherit;
+  justify-content: start;
+  width: $sidenav-width;
+  min-width: $sidenav-width;
+  margin: 0;
+  overflow: auto;
+  pointer-events: inherit;
+  user-select: none;
+  background: $sidenav-bg;
+  padding: $navbar-side-padding-y $navbar-side-padding-x;
+
+  box-shadow: 1px 0 $sidenav-border-color;
+
+  .navbar-brand {
+    text-align: center;
+    padding: 0;
+    margin: 0 0 1.5rem;
+    display: block;
+  }
+
+  .navbar-nav {
+    flex-direction: column;
+    margin-left: -$navbar-side-padding-y;
+    margin-right: -$navbar-side-padding-y;
+
+    .nav-link {
+      padding: .5rem $navbar-side-padding-y;
+    }
+
+    .nav-item.active .nav-link {
+      box-shadow: inset 2px 0 $navbar-active-color;
+      background: rgba($navbar-active-color, .04);
+
+      &:after {
+        content: none;
+      }
+    }
+  }
+
+  .nav-icon {
+    width: 1.5rem;
+  }
+
+  /*
+  Right navbar
+   */
+  &.navbar-right {
+    order: 9;
+    box-shadow: -1px 0 $sidenav-border-color;
+  }
+
+  /*
+  Folded navbar
+   */
+  &.navbar-folded {
+    width: $sidenav-folded-width;
+    min-width: $sidenav-folded-width;
+
+    .navbar-heading {
+      display: none;
+    }
+
+    .nav-text {
+      display: none;
+    }
+
+    .nav-icon {
+      margin: .25rem 0;
+      width: 100%;
+      font-size: 1.125rem;
+
+      .icon {
+        margin: 0 auto;
+        stroke-width: 1.5;
+      }
+    }
+  }
+
+  .navbar-heading {
+    @include subheader;
+    margin: 0 0 .5rem;
+  }
+
+  .nav-link {
+  }
+
+  //  .nav {
+  //    flex-direction: column;
+  //  }
+  //
+  //  .nav-link {
+  //    display: flex;
+  //    align-items: center;
+  //    height: 2.5rem;
+  //    padding: 0 $navbar-padding-x;
+  //    color: $text-muted;
+  //    box-shadow: inset 2px 0 0 0 transparent;
+  //    transition: .3s background, .3s box-shadow;
+  //
+  //    &[aria-expanded="true"],
+  //    &:hover {
+  //      background: rgba($link-color, .04);
+  //      border-color: $primary;
+  //      box-shadow: inset 2px 0 0 0 $primary;
+  //    }
+  //
+  //    > .icon {
+  //      width: 2rem;
+  //    }
+  //
+  //    &[data-toggle="collapse"] {
+  //      &::after {
+  //        display: block;
+  //        margin-left: auto;
+  //        font-family: $font-icons !important;
+  //        content: "";
+  //        transition: transform .3s;
+  //      }
+  //
+  //      &[aria-expanded="true"]::after {
+  //        transform: rotate(-180deg);
+  //      }
+  //    }
+  //  }
+  //
+  //  &:not(.navbar-folded) {
+  //    &[data-toggle="collapse"][aria-expanded="true"] {
+  //      background: none;
+  //      box-shadow: none;
+  //    }
+  //  }
+  //
+  //  &:not(.hide-navbar-folded) {
+  //    //.nav-item .nav-item .nav-link {
+  //    //  padding-left: 2.5rem;
+  //    //}
+  //    //
+  //    //.nav-item .nav-item .nav-item .nav-link {
+  //    //  padding-left: 3.5rem;
+  //    //}
+  //    //
+  //    //.nav-item .nav-item .nav-item .nav-item .nav-link {
+  //    //  padding-left: 4.5rem;
+  //    //}
+  //  }
+  //
+  //  .navbar-brand {
+  //    height: 2.5rem;
+  //    text-align: center;
+  //  }
+  //
+
+
+  //
+  //  .navbar-nav {
+  //    flex-direction: column;
+  //  }
+}
+
 ///*
 //Fixed navbar
 // */
@@ -208,17 +287,6 @@ Navbar logo
 //  bottom: 0;
 //  z-index: $zindex-sticky;
 //
-//  + .navbar-bg {
-//    position: fixed;
-//    top: 0;
-//    right: 0;
-//    bottom: 0;
-//    left: 0;
-//    z-index: $zindex-dropdown;
-//    display: none;
-//    background: rgba($dark, .2);
-//  }
-//
 //  &.navbar-side {
 //    top: 0;
 //    bottom: 0;
@@ -267,16 +335,7 @@ Navbar logo
 //    }
 //  }
 //}
-//
-///*
-//Right navbar
-// */
-//.navbar-right {
-//  order: 9;
-//  border-right: none;
-//  border-left: 1px solid $sidenav-border-color;
-//}
-//
+
 ///*
 //Dark navbar
 // */
@@ -309,89 +368,89 @@ Navbar logo
 //    left: 0;
 //  }
 //}
-//
-///**
-//Folded navbar
-// */
+
+/**
+Folded navbar
+ */
 //.navbar-folded {
 //  width: $sidenav-folded-width;
 //  min-width: $sidenav-folded-width;
-//
-//  .navbar-brand {
-//    width: 2.5rem;
-//  }
-//
-//  .navbar-heading {
-//    display: none;
-//  }
-//
-//  .nav-text {
-//    display: none;
-//  }
-//
-//  .nav-link {
-//    justify-content: center;
-//    padding-top: 0;
-//    padding-bottom: 0;
-//
-//    &[data-toggle="collapse"]::after {
-//      content: none;
-//    }
-//  }
-//
-//  .nav-icon {
-//    justify-content: center;
-//    opacity: 1;
-//  }
-//
-//  .navbar-subnav {
-//    position: absolute;
-//    top: 0;
-//    left: 100%;
-//    background: #fff;
-//
-//    .nav-text {
-//      display: block;
-//    }
-//
-//    .nav-link {
-//      color: $body-color;
-//    }
-//  }
-//}
-//
-//.nav-icon {
-//  display: flex;
-//  flex-shrink: 0;
-//  align-items: center;
-//  width: 1.5rem;
-//  font-size: px2rem(15px);
-//  border-radius: 100%;
-//  opacity: .8;
-//
-//  .icon {
-//    font-size: inherit;
-//  }
+  //
+  //  .navbar-brand {
+  //    width: 2.5rem;
+  //  }
+  //
+  //  .navbar-heading {
+  //    display: none;
+  //  }
+  //
+  //  .nav-text {
+  //    display: none;
+  //  }
+  //
+  //  .nav-link {
+  //    justify-content: center;
+  //    padding-top: 0;
+  //    padding-bottom: 0;
+  //
+  //    &[data-toggle="collapse"]::after {
+  //      content: none;
+  //    }
+  //  }
+  //
+  //  .nav-icon {
+  //    justify-content: center;
+  //    opacity: 1;
+  //  }
+  //
+  //  .navbar-subnav {
+  //    position: absolute;
+  //    top: 0;
+  //    left: 100%;
+  //    background: #fff;
+  //
+  //    .nav-text {
+  //      display: block;
+  //    }
+  //
+  //    .nav-link {
+  //      color: $body-color;
+  //    }
+  //  }
+  //}
+  //
+  //.nav-icon {
+  //  display: flex;
+  //  flex-shrink: 0;
+  //  align-items: center;
+  //  width: 1.5rem;
+  //  font-size: px2rem(15px);
+  //  border-radius: 100%;
+  //  opacity: .8;
+  //
+  //  .icon {
+  //    font-size: inherit;
+  //  }
 //}
-//
+
 //.nav-text {
 //  display: flex;
 //  align-items: center;
 //  width: 100%;
 //}
-//
-///**
-//Utils
-// */
-//.hide-navbar-folded {
-//  @at-root .navbar-side.navbar-folded & {
-//    display: none;
-//  }
-//}
-//
-//.hide-navbar-expanded {
-//  @at-root .navbar-side:not(.navbar-folded) & {
-//    display: none;
-//  }
-//}
-//
+
+/**
+Utils
+ */
+.hide-navbar-folded {
+  @at-root .navbar-side.navbar-folded & {
+    display: none;
+  }
+}
+
+.hide-navbar-expanded {
+  @at-root .navbar-side:not(.navbar-folded) & {
+    display: none;
+  }
+}
+
diff --git a/scss/ui/_nav.scss b/scss/ui/_nav.scss
index 0cfaeebd..fcc4949d 100644
--- a/scss/ui/_nav.scss
+++ b/scss/ui/_nav.scss
@@ -43,6 +43,10 @@
   font-size: 1rem;
   line-height: 1;
   margin-right: .25rem;
+
+  .icon {
+    display: block;
+  }
 }
 
 .nav-link {
-- 
GitLab