mobile docs nav

public/_includes/_docs-nav.jade

@@ -3,8 +3,9 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
     form
       label(for="search-io" class="is-hidden") Search Docs
       input(type="search" id="search-io" placeholder="SEARCH DOCS...")
+    button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
 
-  ul.side-nav-primary
+  ul(class="side-nav-primary" ng-class="showDocsNav ? 'is-visible' : ''")
     if current.path[2]
       for page, slug in public.docs[current.path[1]][current.path[2]]._data
         name = page.menuTitle || page.title

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

@@ -12,7 +12,11 @@
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
+    box-shadow: 0px 3px 6px rgba($coal, .3);
     width: auto;
+    left: 0px;
+    right: 0px;
+    bottom: auto;
   }
 
   a {
@@ -20,6 +24,7 @@
     display: block;
   }
 
+
   .side-nav-search {
     background: $tin;
     padding: $unit;
@@ -27,6 +32,13 @@
     border-bottom: 1px solid $fog;
     position: relative;
 
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      border-bottom: none;
+      padding-right: $unit * 14;
+    }
+
     input {
       border: none;
       border-radius: 200px;
@@ -35,7 +47,28 @@
       height: 30px;
       padding: 0px $unit;
       margin: 0px;
+      font-size: 14px !important;
     }
+
+    .mobile-trigger {
+      position: absolute;
+      top: $unit;
+      right: $unit;
+      border: none;
+      background: darken($tin, 5%);
+      color: $snow;
+      padding-right: $unit * 4;
+
+      .icon {
+        position: absolute;
+        top: 5px;
+        right: $unit;
+        z-index: $layer-1;
+        font-size: 20px;
+        opacity: .87;
+      }
+    }
+
   }
 
   .side-nav-primary {
@@ -43,6 +76,12 @@
     margin: 0px;
     padding: 0px;
 
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      display: none;
+    }
+
     > li {
       margin: 0px;
       padding: 0px;

public/resources/js/site.js

@@ -23,17 +23,20 @@ var angularIO = angular.module('angularIOApp', ['ngMaterial'])
 angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
 
   // TOGGLE MAIN NAV (TOP) ON MOBILE
+  $scope.toggleDocsMenu = function(event) {
+    $scope.showDocsNav = !$scope.showDocsNav;
+  };
+
+  // TOGGLE DOCS NAV
   $scope.toggleMainMenu = function(event) {
     $scope.showMainNav = !$scope.showMainNav;
   };
 
-
   // TOGGLE DOCS VERSION & LANGUAGE
   $scope.toggleVersionMenu = function(event) {
     $scope.showMenu = !$scope.showMenu;
   };
 
-
   // SHOW FULL ABOUT US PAGE BIO
   $scope.showBio = function (event) {
     var bio = angular.element(event.currentTarget).text();
@@ -49,6 +52,7 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
     );
   };
 
+  // INITIALIZE PRETTY PRINT
   prettyPrint();
 }]);