Merge pull request #1137 from ericjim/feat-sidenav-restyle

docs(sidenav): Restylize sidenav

public/docs/_includes/_side-nav.jade

@@ -38,6 +38,18 @@
 - var guide  = sections('guide', function(item) { return !item.basics; });
 - var qs = sections('', function(item) { return item.slug === 'quickstart'; })[0] || {};
 - var reference  = sections('', function(item) { return item.reference; });
+- var anyItemSelected = function(items) {
+-   var selectedCount = items.filter(function(item) { return !!item.class; }).length;
+-   return selectedCount > 0 ? 'is-nav-title-selected' : '';
+- }
+- var isQuickstartSelected = function(_cur) {
+-   var splitted = cur.split('/');
+-   var bit = splitted[splitted.length - 1].replace('.html', '');
+-   return bit === 'quickstart' ? 'is-nav-title-selected' : '';
+-}
+- var isCollapsed = function(titleStyle) {
+-   return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden';
+- }
 
 nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
   // SEARCH BAR
@@ -49,42 +61,51 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
 
   div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
     .nav-blocks
-      .nav-title Tutorial
+      a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart
-      .nav-primary-link(class="#{qs.class}")
-        a(href="#{qs.href}" title="#{qs.tooltip}") #{qs.navTitle}
-      .nav-sub-title Case Study: Tour of Heroes
-      .nav-ordered-lists
-        ol
-          each item in tutorial
-            li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
     .nav-blocks
-      .nav-title Basics
+      a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
-      .nav-ordered-lists
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
-        ol
+      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
-          each item in basics
+        ul
-            li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}    
+          each item, index in tutorial
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
 
     .nav-blocks
-      .nav-title Developer Guide
+      a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics
-      .nav-unordered-lists
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
+
+      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}")
+        ul
+          each item, index in basics
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
+
+    .nav-blocks
+      a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
+
+      .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}")
         ul
           each item in guide
-            li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
     .nav-blocks
-      .nav-title Cookbook
+      a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
-      .nav-unordered-lists
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
+
+      .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}")
         ul
           each item in cookbook
-            li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
     .nav-blocks
-      .nav-title Reference
+      a(class="nav-title #{anyItemSelected(reference)}" href="#{reference[0].href}" title="#{reference[0].tooltip}") Reference
-      .nav-unordered-lists
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
+        
+      .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(reference))}")
         ul
           each item in reference
-            li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
 script.
   // Could put in appCtrl but only needed here and clear here

public/resources/css/module/_side-nav.scss

@@ -20,6 +20,9 @@
     bottom: auto;
   }
 
+  .is-hidden {
+    display: none;
+  }
 
   // SEARCH BOX
   .side-nav-search {
@@ -77,6 +80,10 @@
     }
   }
 
+  .is-nav-title-selected {
+    color: $regal !important;
+    background-color: #DCE2E5 !important;
+  }
 
   // PRIMARY SIDENAV BUTTON
   .side-nav-primary {
@@ -135,8 +142,7 @@
   // SECONDARY SIDENAV
   .side-nav-secondary {
     @extend .side-nav-primary;
-    background: $mist;
+    background-color: #DCE2E5;
-    box-shadow: inset 0px 2px 2px rgba($coal, .24);
 
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),
@@ -144,40 +150,35 @@
       display: none;
       max-height: ($phone-breakpoint * 0.60);
     }
-    
+
     // FLAT NAV (.nav)
     .nav-blocks {
-      margin: 0 ($unit * 1.5);
+      margin: 0;
-      padding: ($unit * 2) 0;
+      padding: 0;
       border-bottom: 1px solid $fog;
       color: $heather;
-      
+
       a {
         text-decoration: none;
         color: $metal;
         display: block;
       }
-      
+
-      ol {
-        padding-left: ($unit * 2);
-        margin: 0
-      }
-      
       ul {
         list-style: none;
         padding: 0;
         margin: 0
       }
-      
+
       div, li {
         &.is-selected  {
           > a {
-            background: white;
+            background: #CDD5DA;
-            color: $regal;
+            color: #1E88E5;
           }
         }
       }
-      
+
       li {
         min-height: ($unit * 2);
         position: relative;
@@ -191,17 +192,35 @@
     .nav-title,
     .nav-sub-title {
         text-transform: uppercase;
-        font-weight: bold;
+        font-weight: 500; //medium
+        color: #78909C;
     }
 
     .nav-title {
-        font-size: ($unit * 2);
+        font-size: 14px;
-        padding: ($unit * 0.5) 0 ($unit * 1) 0;
+
+        padding: ($unit * 2) ($unit * 2);
+        margin: 0;
+        background-color: #ECEFF1;
+
+        .inline-arrow-down-svg {
+          float: right;
+          opacity: 0.56;
+        }
+
+        a {
+          display: inline;
+        }
     }
 
     .nav-primary-link {
-        margin-bottom: ($unit * 1);
         position: relative;
+
+        a {
+          padding-left: 16px;
+          padding-top: 16px;
+          padding-bottom: 16px;
+        }
     }
 
     .nav-sub-title {
@@ -212,42 +231,51 @@
     .nav-active a {
         color: $regal;
         background: $lightgrey;
-        font-weight: bold;
+        font-weight: 500; //medium
     }
 
-    .nav-ordered-lists li a,
+    .nav-unordered-lists, .nav-ordered-lists {
-    .nav-unordered-lists li a,
+      // Apply inset shadows to the list under the title
-    .nav-primary-link a {
+      box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08);
-        margin-left: ($unit * -3);
+
-        padding-left: ($unit * 3);
+      // -- First Child
-        padding-top: ($unit * 0.5);
+      // Apply inset shadows on the first child when hovering, since the background color will cover the shadow
-        padding-bottom: ($unit * 0.5);
+      .nav-list-item:first-child {
+        &:hover {
+          box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
+        }
+      }
+
+      // Apply inset shadows on the first child when selected, since the background color will cover the shadow
+      .is-selected:first-child a {
+        box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
+      }
+
+      // -- Last Child
+      // Apply inset shadows on the last child when hovering, since the background color will cover the shadow
+      .nav-list-item:last-child {
+        &:hover {
+          box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
+        }
+      }
+
+      // Apply inset shadows on the last child when selected, since the background color will cover the shadow
+      .is-selected:last-child a {
+        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
+      }
     }
 
-    .nav-blocks li a:hover,
+    .nav-list-item {
-    .nav-primary-link a:hover {
+      a {
-        background: $fog;
+        font-size: 13px;
-    }
+        font-weight: 400; //medium
+        padding-left: $unit * 2;
+        line-height: 32px;
+      }
 
-    .nav-primary-link a:hover {
+      &:hover {
-        padding-top: ($unit * 0.5);
+        background-color: #CFD8DC;
-        padding-bottom: ($unit * 0.5);
+      }
     }
-
-    .nav-blocks li a:hover:before,
-    .nav-primary-link a:hover:before {
-        position: absolute;
-        top: 50%;
-        content: "";
-        display: inline-block;
-        width: 0.4em;
-        height: 0.4em;
-        border-right: 0.2em solid $tin;
-        border-top: 0.2em solid $tin;
-        transform: rotate(45deg);
-        right: -5px;
-        margin-top: -3px;
-        margin-right: 14px;
-    }    
   }
 }

public/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg

@@ -0,0 +1,4 @@
+<svg fill="#8FA4AE" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
+    <path d="M0-.75h24v24H0z" fill="none"/>
+</svg>