Adds two levels navigation (doc)

Author: andreamangano

assets/scss/docs.scss

@@ -75,20 +75,30 @@ body {
 // DOCS NAV
 //---------
 .docs-nav {
-  padding: $space-small 0;
+  padding: ($v-unit * 2) 0;
 
   // &__list {}
 
   // &__item {}
 
+  &__items {
+    padding: $v-unit 0;
+  }
+
+  &__section-title {
+    border-bottom: 1px solid rgba(neutral-color('medium'), 0.5);
+    margin: 0;
+    padding: $v-unit $h-unit;
+  }
+
   &__link {
     @include get-type('h6');
-    border: 0;
+    border-bottom: 0;
     color: neutral-color('medium');
     display: block;
     font-weight: normal;
     margin: 0;
-    padding: ($space-base / 2) $space-base;
+    padding: ($v-unit / 2) $h-unit;
     text-transform: uppercase;
   }
 }

settings/pug.js

@@ -1,11 +1,27 @@
 var data = require('./../dist/data.json');
 data.navigation = [
-  {label: 'Logo', url: '#logo'},
-  {label: 'Palettes', url: '#palettes'},
-  {label: 'Typography', url: '#typography'},
-  {label: 'Icons', url: '#icons'},
-  {label: 'Faq', url: '#faq'},
-  {label: 'Footer', url: '#footer'}
+  {
+    label: 'Basic',
+    items: [
+      {label: 'Logo', url: '#logo'},
+      {label: 'Palettes', url: '#palettes'},
+      {label: 'Typography', url: '#typography'},
+      {label: 'Icons', url: '#icons'}
+    ]
+  },
+  {
+    label: 'Components',
+    items: [
+      {label: 'Faq', url: '#faq'}
+    ]
+  },
+  {
+    label: 'Layouts',
+    items: [
+      {label: 'Header', url: '#header'},
+      {label: 'Footer', url: '#footer'}
+    ]
+  }
 ];
 data.palettes = require('./palettes');
 data.typography = require('./typography');

views/docs/_layout.pug

@@ -25,12 +25,17 @@ html
           .docs-logo
             .docs-logo__image
               include ../../assets/images/logo/vertical.svg
+
           nav.docs-nav
             .docs-nav__list
               each item in navigation
-                li.docs-nav__item
-                  a.docs-nav__link(
-                  href=`/docs.html?${item.url}`)!=item.label
+                .docs-nav__item
+                  h6.docs-nav__section-title!=item.label
+                  .docs-nav__items
+                    each subItem in item.items
+                      a.docs-nav__link(
+                      href=`/docs.html?${subItem.url}`)!=subItem.label
+
         .docs-layout__page-wrapper
           .docs-layout__page
             block page