diff --git a/js/tabler.js b/js/tabler.js
index e3fef4ec372f0604937f4a629a913ef14ee98eb1..ebb6324af90752bb595ec9c7240478901df14c3c 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 af4b3e10d4005489e4947379c3444ffb9cfb768f..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..b04b6fda95f295b9ffdcb19028d6178504bee63a
--- /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 603303471a63552e0d3f55b8a12dec146850dbb4..20806533467c9fa92615296a12f3159bde1ce83b 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 0000000000000000000000000000000000000000..fb24140cd46219f304e7fbdbdf5adb97e221def5
--- /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 52c0e27bebf02d5d766cf3a6d5b7425d9eb44c80..a5296716b26263ee09c6e80a6809a89380f50c3f 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 b455404ce307b8a0c7dc422166558dafe4065658..ee703fc3e306c7e03edf4e0e9cd418e3b8f35240 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 0e498e0dd7fff358c001a47ee19ee11d40140c60..54559d97ada3b1e7b101f1f1b6eef7e0bed02828 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 b8657d0d8ee23f82f8d3e15831c63ce9a8dd2e01..45b3a3e787e110577b882b6d73eee34ac939f20c 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 4171bc6284b7331ac135f633bb9852b69f910341..1aa40dacc15040f0770243a56a82c9a0dc776acc 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 b2c60b6a5ad09bb57d0b1971a3ab413ee53e71b4..fc3a0f307bcddf7744884d2469f6168116002725 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 66ec4a66b99e27cdb3c7b86f9bb6ca0d1a7b7f9f..a09ee05d0261957bb544fdcbb2c40222b483c9cb 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 0c6b5a40a970de3cf39f7de689073a05d461b099..09d5b0c1295b79f7f867e261832b395114c694c2 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 3f3efb2b47f139f7a5915f0de382e1543287df9f..f453afffb0be5aa2222f1dca78c4f732db4e861e 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 49f8511f15cec80a7d5f398d7c749eb2dbf6e23c..85645a513e6172acdbf8dc44d0fb37891c4aaee4 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 3134a4f52c41141c3d90693a91502185c7b5b865..b6d1726ce2b36c2c47ded3e3421e9d0b322bd810 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 bec9bd4b79b94734f706acb09414d64da114d55e..a5596797bfdf8723642650aecd4f3be3be02e63d 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 dadcb0ca06b064301ad4f7e0f0b154c1a15e1517..d6efcdb2ac9e7e0dcff1ec4515191f504de0dbd8 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 0000000000000000000000000000000000000000..59cfb614612e17169e7a69385ef34246a364cd94
--- /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 8b08b365d6a871ace377a7273aa0fd7a6495f59f..d656dc1f665167b3e77fe3899e8cd24e49b0feb7 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 0cfaeebd728e82b7e7d14421eda26b910b3fe676..fcc4949dd51ab1c338bd747e291ca25e4d2d3f9e 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 {