sidenav fixes

pages/_data/menu.yml

@@ -14,6 +14,10 @@ level-1:
         level-3:
           title: Level 3
           icon: menu
+          children:
+            level-4:
+              title: Level 4
+              icon: menu
 docs:
   title: Documentation
   icon: file-text

pages/_includes/cards/invoices.html

@@ -5,16 +5,16 @@
    <div class="table-responsive">
       <table class="table card-table table-vcenter text-nowrap datatable">
          <thead>
-         <tr>
-            <th class="w-1">No.</th>
-            <th>Invoice Subject</th>
-            <th>Client</th>
-            <th>VAT No.</th>
-            <th>Created</th>
-            <th>Status</th>
-            <th>Price</th>
-            <th></th>
-         </tr>
+            <tr>
+               <th class="w-1">No.</th>
+               <th>Invoice Subject</th>
+               <th>Client</th>
+               <th>VAT No.</th>
+               <th>Created</th>
+               <th>Status</th>
+               <th>Price</th>
+               <th></th>
+            </tr>
          </thead>
 
          <tbody>

pages/_includes/layout/menu.html

 {% assign current-page = page.menu | default: layout.menu | split: '.' %}
+{{ current-page }}
 <ul class="sidenav-menu">
 	{% for level-1 in site.data.menu %}
 	{% assign level-1-key = level-1[0] %}
@@ -34,4 +35,4 @@
 		{% endif %}
 	</li>
 	{% endfor %}
-</ul>
\ No newline at end of file
+</ul>

pages/_includes/layout/sidenav-content.html

@@ -10,23 +10,25 @@
       Docs
    </h6>
 
+   {{ page.menu }}
+
    <ul class="navbar-nav mb-md-4">
-      {% for item in site.data.menu %}
-      {% assign icon = item[1].icon %}
+      {% for level-1 in site.data.menu %}
+      {% assign icon = level-1[1].icon %}
       <li class="nav-item">
-         <a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ item[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
+         <a class="nav-link{% if level-1[1].active %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
             {% include ui/icon.html icon=icon  %}
-            <span class="nav-link-text">{{ item[1].title }}</span>
-            {% if item[1].label %}
-            <span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
+            <span class="nav-link-text">{{ level-1[1].title }}</span>
+            {% if level-1[1].label %}
+            <span class="badge bg-primary text-white ml-auto">{{ level-1[1].label }}</span>
             {% endif %}
          </a>
-         {% if item[1].children or item[1].docs %}
-         <div class="collapse navbar-collapse" id="sidebar-{{ item[0] }}">
+         {% if level-1[1].children or level-1[1].docs %}
+         <div class="collapse navbar-collapse" id="sidebar-{{ level-1[0] }}">
             <ul class="nav nav-sm flex-column">
 
-               {% if item[1].docs %}
-               {% assign docs-key = item[1].docs %}
+               {% if level-1[1].docs %}
+               {% assign docs-key = level-1[1].docs %}
                {% for p in site.docs-menu[docs-key].pages %}
                {% assign doc = site.docs | where: "slug", p | first %}
                <li class="nav-item">
@@ -37,19 +39,33 @@
                {% endfor %}
                {% endif %}
 
-               {% for p in item[1].children %}
+               {% for level-2 in level-1[1].children %}
                <li class="nav-item">
-                  <a href="{% if p[1].url %}{{ p[1].url }}{% else %}#{% endif %}" class="nav-link">
-                     {{ p[1].title }}
+                  <a {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %} class="nav-link">
+                     {{ level-2[1].title }}
                   </a>
-                  {% if p[1].children %}
-                  <div class="collapse navbar-collapse" id="sidebar-{{ p[0] }}">
+                  {% if level-2[1].children %}
+                  <div class="collapse navbar-collapse" id="sidebar-{{ level-2[0] }}">
                      <ul class="nav nav-sm flex-column">
-                        {% for r in p[1].children %}
+                        {% for level-3 in level-2[1].children %}
                         <li class="nav-item">
-                           <a href="{% if r[1].url %}{{ r[1].url }}{% else %}#{% endif %}" class="nav-link">
-                              {{ r[1].title }}
+                           <a {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}  class="nav-link">
+                              {{ level-3[1].title }}
                            </a>
+
+                           {% if level-3[1].children %}
+                           <div class="collapse navbar-collapse" id="sidebar-{{ level-3[0] }}">
+                              <ul class="nav nav-sm flex-column">
+                                 {% for level-4 in level-3[1].children %}
+                                 <li class="nav-item">
+                                    <a href="{% if level-4[1].url %}{{ level-4[1].url }}{% else %}#{% endif %}" class="nav-link">
+                                       {{ level-4[1].title }}
+                                    </a>
+                                 </li>
+                                 {% endfor %}
+                              </ul>
+                           </div>
+                           {% endif %}
                         </li>
                         {% endfor %}
                      </ul>

pages/_includes/layout/sidenav.html

-<div class="sidenav sidenav-expand-md">
-   {% include layout/sidenav-content.html logo="white" %}
+<div class="sidenav sidenav-dark sidenav-expand-md">
+   {% assign menu = page.menu | default: layout.menu %}
+   {% include_cached layout/sidenav-content.html logo="white" menu=menu %}
 </div>

pages/_layouts/default.html

@@ -3,7 +3,7 @@ layout: base
 ---
 
 <div class="d-flex h-auto min-h-screen">
-   {% include_cached layout/sidenav.html %}
+   {% include layout/sidenav.html %}
 
    <div class="flex-fill d-flex flex-column mw-100">
       {% include_cached layout/header.html %}

pages/index.html

 ---
 title: Dashboard
 page-title: Dashboard
+menu: level-1.level-2.level-3.level-4
 ---
 
 <div class="row row-cards">

scss/_variables.scss

 // FONTS
 $font-family-base: "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
+$font-icons: "Feather" !default;
 
 // EXTERNAL FONTS
 $google-font-url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700" !default;

scss/layout/_sidenav.scss

@@ -6,6 +6,7 @@ Sidebar
   min-width: 16rem;
   background: $sidenav-bg;
   border-right: 1px solid $sidenav-border-color;
+  user-select: none;
 
   .nav-link {
     display: flex;
@@ -20,13 +21,13 @@ Sidebar
     }
 
     > .icon {
-      min-width: 2rem;
+      width: 2rem;
     }
 
     &[data-toggle="collapse"] {
       &:after {
         display: block;
-        font-family: 'Feather' !important;
+        font-family: $font-icons !important;
         content: $icon-fe-chevron-down;
         margin-left: auto;
         transition: transform .3s;
@@ -38,25 +39,23 @@ Sidebar
     }
   }
 
+  .nav-item .nav-item {
+    padding-left: 2rem;
+
+    .nav-item {
+      padding-left: 1rem;
+    }
+  }
+
   .navbar-brand {
     text-align: center;
   }
 
-  //.navbar-divider {
-  //
-  //}
-
   .navbar-heading {
     padding: .5rem 0;
     margin: 0;
     @extend .text-subheader;
   }
-
-  .nav {
-    .nav-item {
-      padding-left: 2rem;
-    }
-  }
 }
 
 /**

scss/ui/_tables.scss

 .table {
+  thead {
+    th {
+      border-width: $table-border-width;
+      background: $gray-100;
+      text-transform: uppercase;
+      font-size: $h6-font-size;
+      font-weight: 600;
+    }
+  }
+
   th {
     padding-top: .5rem;
     padding-bottom: .5rem;
@@ -8,7 +18,6 @@
   }
 }
 
-
 .table-md {
   th,
   td {