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"
+      name = page.menuTitle || page.title
-        li <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button>Docs Home</a>
+      selected =  current.path[3] == slug ? 'is-selected':''
-      else
+
-        li <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button>#{page.title}</a>
+      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,83 +1,77 @@
-
+// STEP 1 - Install Angular ##########################
-//- 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
-  
+
   .c11
     header
-    
+
       h3#section-install-angular Install Angular
-      p 
+      p
-        b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular. 
+        b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular.
         | The following setup is for those who want to try out Angular while it is in alpha.
       p
-        | For the sake of this quickstart we recommend using the 
+        | For the sake of this quickstart we recommend using the
         a(href="https://github.com/davideast/conscious") <code>es6-shim</code> GitHub repository
         |. This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
-        
+
-      p 
+      p
       | Clone the repository inside of aleady existing project.
-      
+
       pre
-        code git clone https://github.com/davideast/concious.git es6-shim         
+        code git clone https://github.com/davideast/concious.git es6-shim
-      
+
       section.docs-sub-section
         h4 A word on ES6
         p
           | Angular builds on top of ES6, the new specification of the JavaScript language. Not all ES6 features are available in all browsers. The following es6-shim repository allows you to use ES6 in the browser today.
-        
+
         p
           | Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here.
-        
+
         p
-          | The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project. 
+          | The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
-          
+
-      
+
-// STEP 2 - Import Angular ##########################       
+// STEP 2 - Import Angular ##########################
 .content-block.content-number.clearfix
   i.number.icon-number2.large
-  
+
   .c11
     header
-    
+
       h3#section-transpile Import Angular
       p
-        | Create a file named <code>app.es6</code> at the root of the project. The <code>.es6</code> extension signifies that the file uses ES6 syntax. 
+        | Create a file named <code>app.es6</code> at the root of the project. The <code>.es6</code> extension signifies that the file uses ES6 syntax.
-        
+
-      p Using the ES6 module syntax you can import the required modules from Angular2. 
+      p Using the ES6 module syntax you can import the required modules from Angular2.
       pre
         code
           | import {Component, Template, bootstrap} from 'angular2/angular2';
       p
         | The above import statement will import the three modules from Angular. These modules load at runtime.
-      
+
-// STEP 3 - Create a component ########################## 
+// STEP 3 - Create a component ##########################
 .content-block.content-number.clearfix
   i.number.icon-number3.large
-  
+
   .c11
     header
-    
+
       h3#section-angular-create-account Create a component
       p
         | Components are custom HTML elements. Angular uses components to empower HTML. Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.
-        
+
       pre
         code &lt;app&gt;&lt;/app&gt;
-      
+
       p A component consists of two parts; the annotation section and the component controller.
-      
+
       pre
         code
           | import {Component, Template, bootstrap} from 'angular2/angular2';
           | <!-- -->
           | // Annotation Section
-          | @Component({ 
+          | @Component({
           |   selector: 'app'
           | })
           | @Template({
@@ -91,19 +85,18 @@
           |     this.name = "Alice";
           |   }
           | }
-        
+
       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>. 
+          | 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
-          | 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
           | The <code>@Template</code> annotation defines the template to apply to the component. This component uses an inline template, but external templates are available as well. To use an external template specify a <code>url</code> property and give it the path to the html file.
         pre
           code
-            | @Component({ 
+            | @Component({
             |   selector: 'app'
             | })
             | @Template({
@@ -114,7 +107,7 @@
         p
           | The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code> and a template of <code>&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;</code>.
         .clear
-        
+
       section.docs-sub-section
         h4 Component Controller
         p
@@ -132,38 +125,38 @@
           | The template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of <code>{{ name }}</code>.
         .clear
 
-// STEP 4 - Bootstrap ########################## 
+// STEP 4 - Bootstrap ##########################
 .content-block.content-number.clearfix
   i.number.icon-number4.large
-  
+
   .c11
     header
-    
+
       h3#section-transpile Bootstrap
       p
-        | The last step to load the component on the page. 
+        | The last step to load the component on the page.
-        
+
       section.docs-sub-section
         h4 The <code>bootstrap</code> function
         p
           | Angular provides a <code>bootstrap</code> function that renders a component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will render as well.
-            
+
         code
           pre bootstrap(AppComponent);
       .clear
-        
+
-// STEP 5 - Declare the HTML ##########################       
+// STEP 5 - Declare the HTML ##########################
 .content-block.content-number.clearfix
   i.number.icon-number5.large
   .c11
     header
-        
+
       h3#section-angular-create-account Declare the HTML
       p
         | Create an <code>index.html</code> file at the root of the project. Include the <code>es6-shim.js</code> file in the <code>head</code> tag. Now, declare the app component the <code>body</code>. The es6-shim must load before any application code.
-            
+
       code
-        pre 
+        pre
           | &lt;html&gt;
           |   &lt;head&gt;
           |     &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
@@ -176,13 +169,13 @@
           |     <!-- -->
           |   &lt;/body&gt;
           | &lt;/html&gt;
-        
+
       section.docs-sub-section
         h4 Load the component module
-        p 
+        p
-          | The last step is to load the module for the app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers. 
+          | The last step is to load the module for the app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers.
 
-        p 
+        p
           | To load the needed modules, System needs to know where to load the files from. The paths property in System specifies the location of the files.
 
         p Tell System about three paths:
@@ -190,9 +183,9 @@
             li Angular - The Angular framework.
             li Runtime assertions - Optional assertions for runtime type checking.
             li The app component created above - The component to display on the page.
-          
+
         code
-          pre 
+          pre
             | &lt;html&gt;
             |   &lt;head&gt;
             |     &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
@@ -216,17 +209,17 @@
             |     &lt;/script&gt;
             |   &lt;/body&gt;
             | &lt;/html&gt;
-        .clear 
+        .clear
-          
+
         p
           | Run the root of your project on a local server.
 
 .content-block.content-number.clearfix
   i.number.icon-number6.large
-  
+
   .c11
     header
-    
+
       h3#section-transpile Extra-credit
       p
         | Learn some template syntax for extra-credit.

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;
       }
     }
   }