Improves the sidebar display and adds fake content

Author: lejoe

content/texts/en/index.yml

@@ -1,6 +1,36 @@
 index:
-  header:
-    title: Project skeleton
-    subtitle: This is a project example
-  content: >
-    Check out the [skeleton readme](https://github.com/ginetta/Skeleton/blob/master/README.md) for more infos
+  sidebar:
+    subtitle:
+    navigation:
+      - title: Base Components
+        list:
+          - title: Colors
+            link: #
+          - title: Grid
+            link: #
+          - title: Icons
+            link: #
+          - title: Typography
+            link: #
+      - title: UI Components
+        list:
+          - title: Buttons
+            link: #
+          - title: Dropdown
+            link: #
+          - title: Form element
+            link: #
+          - title: Link
+            link: #
+      - title: Partials
+        list:
+          - title: Header
+            link: #
+          - title: Navigation
+            link: #
+          - title: Footer
+            link: #
+      - title: Pages
+        list:
+          - title: Home with a veryyyyy long title
+            link: #

src/modules/header/style.scss

@@ -3,4 +3,5 @@
 }
 .styleguide-title {
   @include t-paragraph();
+  color: $c-cloud;
 }

src/modules/nav-group/definition.yml

@@ -1,10 +1,10 @@
 data:
   title: list title
   list:
-    – item: Item 1
+    – title: Item 1
       link: #
-    – item: Item 2
+    – title: Item 2
       link: #
-    – item: Item 3
+    – title: Item 3
       link: #
 options: {}

src/modules/nav-group/style.scss

@@ -1,14 +1,16 @@
-$nav-space-left: 24px !default;
-$nav-space-left-half: 0.5 * $nav-space-left;
-$nav-space-bottom: 24px !default;
+$nav-padding: 24px !default;
+$nav-space-bottom: $nav-padding !default;
+$nav-active-carret-width: 10px !default;
 
 .nav-group {
+  padding: $nav-padding;
+
   &-title {
     @include t-label();
     color: $c-darkcloud;
-    padding-left: $nav-space-left;
     margin-bottom: $nav-space-bottom;
   }
+
   &-list {
     padding: 0;
     margin: 0;
@@ -18,7 +20,6 @@ $nav-space-bottom: 24px !default;
 
 .nav-item {
   position: relative;
-  padding-left: $nav-space-left;
   &:hover {
     cursor: pointer;
     .nav-link {
@@ -36,11 +37,11 @@ $nav-space-bottom: 24px !default;
     &:before {
       content: '';
       background-color: $c-steelblue;
-      width: $nav-space-left-half;
+      width: $nav-active-carret-width;
       height: 100%;
       display: block;
       position: absolute;
-      left: 0;
+      left: -$nav-padding;
       top: 0;
     }
   }

src/pages/index.jade

@@ -5,5 +5,5 @@ block meta
   //- TODO: add you page meta tags
 
 block body
-  +sidebar
+  +sidebar(data.index.sidebar)
   .content

src/partials/sidebar/markup.jade

@@ -7,12 +7,6 @@ mixin sidebar(data, options)
 
     hr
 
-    +nav-group({
-      title: 'ui components',
-      list: [
-        { title: 'Item 1', link: '#', isActive: true },
-        { title: 'Item 2', link: '#' },
-        { title: 'Item 3', link: '#' },
-        { title: 'Item 4', link: '#' }
-      ]
-    }).sidebar-content
+    each navgroup in data.navigation
+      +nav-group(navgroup)
+

src/partials/sidebar/spec.jade

@@ -1,3 +1,3 @@
 h2 sidebar
 
-+sidebar
++sidebar(data.index.sidebar)

src/partials/sidebar/style.scss

@@ -1,12 +1,20 @@
 .sidebar {
-  width: 200px;
+  max-width: 200px;
   height: 100%;
   background-color: $c-eigengrau;
   color: $c-white;
   display: inline-block;
   float: left;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  hr {
+    display: block;
+    border: 0;
+    border-top: 1px solid $c-cloud;
+  }
 }
 
 .sidebar-content {
-  padding: 2rem;
+  padding: $sidebar-padding;
 }

src/styles/_0.settings.scss

@@ -16,10 +16,9 @@ $breakpoints: (
 
 // general
 $s:                 12px;
-$s-half:            0.5 * $s;
+$s-half:            .5 * $s;
 $s-double:          2   * $s;
 
-// nav-group
-$nav-space-left:    $s-double;
-$nav-space-bottom:  $s-double;
+$sidebar-padding:   $s-double;
+$nav-padding:       $sidebar-padding;