From 334d5e2edb74c2f2b034777182e363a4e406c22c Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Tue, 14 Apr 2015 05:22:14 -0700
Subject: [PATCH] secondary list

---
 public/_includes/_docs-nav.jade            | 10 +--
 public/resources/css/module/_side-nav.scss | 84 +++++++++++++++++++---
 2 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade
index 87e8909d85..1ef80d2475 100644
--- a/public/_includes/_docs-nav.jade
+++ b/public/_includes/_docs-nav.jade
@@ -11,18 +11,18 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
         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>
+        li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>
 
           if selected
-            ul
+            ul.side-nav-secondary
               for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]]._data
                 name = page.menuTitle || page.title
                 selected =  current.path[4] == slug ? 'is-selected':''
-                li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button> #{slug}</a>
+                li(class="#{selected}") <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html" md-button> #{slug}</a>
 
                 if selected
-                  ul
+                  ul.side-nav-tertiary
                     for page, slug in public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]._data
                       name = page.menuTitle || page.title
                       selected =  current.path[4] == slug ? 'is-selected':''
-                      li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
+                      li(class="#{selected}") <a  href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{name}</a>
diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss
index 9b0892e9fe..190271b129 100644
--- a/public/resources/css/module/_side-nav.scss
+++ b/public/resources/css/module/_side-nav.scss
@@ -91,6 +91,17 @@
       padding: 0px;
       border-bottom: 1px solid $fog;
 
+      &.is-selected  {
+        > a {
+          background: $fog;
+          color: $regal;
+
+          .side-nav-icon {
+            color: $regal;
+          }
+        }
+      }
+
       > a {
         line-height: ($unit * 6) - 1;
         padding: 0px ($unit * 2) 0px ($unit * 6);
@@ -102,15 +113,6 @@
         position: relative;
         text-decoration: none;
         display: block;
-
-        &.is-selected {
-          background: $fog;
-          color: $regal;
-
-          .side-nav-icon {
-            color: $regal;
-          }
-        }
       }
 
       .side-nav-icon {
@@ -124,4 +126,68 @@
       }
     }
   }
+
+
+  // SECONDARY SIDENAV BUTTON
+  .side-nav-secondary {
+    @extend .side-nav-primary;
+    background: $fog;
+    box-shadow: inset 0px 2px 2px rgba($coal, .24);
+
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      display: none;
+    }
+
+    > li {
+
+      &.is-selected  {
+        > a {
+          background: transparent;
+          color: $regal;
+        }
+      }
+
+      > a {
+        line-height: ($unit * 5) - 1;
+        padding: 0px ($unit * 2) 0px ($unit * 5);
+        font-size: 13px;
+      }
+
+      .side-nav-icon {
+        position: absolute;
+        top: 0px;
+        left: 16px;
+        z-index: $layer-1;
+        font-size: 19px;
+        color: $cloud;
+        line-height: 47px;
+      }
+    }
+  }
+
+  // SECONDARY SIDENAV BUTTON
+  .side-nav-tertiary {
+    padding-bottom: ($unit * 1);
+    margin: 0px 0px 0px ($unit * 2);
+    list-style-type: disc;
+
+    > li {
+      &.is-selected  {
+        > a {
+          background: transparent;
+          color: $coal;
+        }
+      }
+
+      > a {
+        line-height: ($unit * 3) - 1;
+        font-size: 13px;
+        text-transform: none;
+        text-align: left;
+        margin: 0px;
+      }
+    }
+  }
 }
\ No newline at end of file