dynamic selecting nav

public/_includes/_docs-nav.jade

@@ -2,10 +2,9 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
   .side-nav-search
     input(type="search" placeholder="SEARCH DOCS...")
 
-
   ul.side-nav-primary
     for page, slug in public.docs[current.path[1]][current.path[2]]._data
-      if slug == "index"
-        li <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button>Docs Home</a>
-      else
-        li <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button>#{page.title}</a>
+      name = page.menuTitle || page.title
+      selected =  current.path[3] == slug ? 'is-selected':''
+
+      li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>

public/docs/js/_quickstart.jade

@@ -1,9 +1,3 @@
-
-//- if lang == 'js'
-//-   h2 I like JavaScript
-//- else if lang == 'dart'
-//-   h2 I like Dart
-
 // STEP 1 - Install Angular ##########################
 .content-block.content-number.clearfix
   i.number.icon-number.large
@@ -95,8 +89,7 @@
       section.docs-sub-section
         h4 Component Annotations
 
-        p
-          | A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>. 
+        p A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
         p
           | The <code>@Component</code> annotation defines the HTML tag for the component. The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
         p

public/docs/js/latest/_data.json

@@ -1,22 +1,28 @@
 {
   "index": {
+    "icon": "home",
     "title": "Angular Docs",
+    "menuTitle": "Docs Home",
     "banner": "Angular 2 is currently in Alpha Preview. We reccomend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
   },
 
   "quickstart": {
+    "icon": "query-builder",
     "title": "5 Min Quickstart"
   },
 
   "resources": {
+    "icon": "play-circle-fill",
     "title": "Angular Resources"
   },
 
   "api": {
+    "icon": "book",
     "title": "API Proposal"
   },
 
   "help": {
+    "icon": "chat",
     "title": "Help & Support"
   }
 }

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

@@ -37,12 +37,32 @@
 
       > a {
         line-height: $unit * 6;
-        padding: 0px ($unit * 2);
+        padding: 0px ($unit * 2) 0px ($unit * 6);
         color: $metal;
         font-size: 14px;
         text-transform: uppercase;
         text-align: left;
         font-weight: 400;
+        position: relative;
+
+        &.is-selected {
+          background: $fog;
+          color: $regal;
+
+          .side-nav-icon {
+            color: $regal;
+          }
+        }
+      }
+
+      .side-nav-icon {
+        position: absolute;
+        top: 0px;
+        left: 16px;
+        z-index: $layer-1;
+        font-size: 19px;
+        color: $cloud;
+        line-height: 47px;
       }
     }
   }