mobile nav

public/_includes/_main-nav.jade

@@ -2,7 +2,9 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
   nav
     h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
 
-    ul
+    button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
+
+    ul(ng-class="showMainNav ? 'is-visible' : ''")
       li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
       li.l-left <a class="main-nav-button" href="/docs/js/latest/" md-button>Docs</a>
       li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>

public/resources/css/_state.scss

@@ -1,6 +1,6 @@
 .is-hidden {
   display: none !important;
 }
-.hide {
-  display: none;
+.is-visible {
+  display: block !important;
 }

public/resources/css/main.scss

@@ -16,7 +16,7 @@
 *
 */
 
-@import 'module/top-nav';
+@import 'module/main-nav';
 @import 'module/side-nav';
 @import 'module/footer';
 @import 'module/dropdown';

public/resources/css/module/_dropdown.scss

@@ -1,6 +1,6 @@
 .dropdown {
   position: relative;
-  z-index: $layer-5;
+  z-index: $layer-1;
 
   .dropdown-button {
     background: rgba($snow, .1);
@@ -11,6 +11,7 @@
     padding: 0px ($unit * 4) 0px ($unit * 2);
     cursor: pointer;
     position: relative;
+    z-index: $layer-1;
 
     .icon {
       position: absolute;

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

@@ -30,6 +30,28 @@
       margin: 0px 0px 0px 0px;
     }
 
+    .main-nav-button {
+      @media handheld and (max-width: $phone-breakpoint),
+      screen and (max-device-width: $phone-breakpoint),
+      screen and (max-width: $tablet-breakpoint) {
+        display: block;
+        float: none;
+        line-height: $unit * 6;
+        text-align: left;
+        font-size: 14px;
+        padding: 0px ($unit * 5);
+
+        &.has-icon {
+          padding: 0px ($unit * 5);
+          position: static;
+        }
+
+        .icon {
+          display: none;
+        }
+      }
+    }
+
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),
     screen and (max-width: $tablet-breakpoint) {
@@ -38,8 +60,8 @@
       position: absolute;
       top: 0px;
       right: $unit;
-      z-index: $layer-1;
-      background: $regal;
+      z-index: $layer-6;
+      background: $ocean;
       display: none;
 
       li {
@@ -49,6 +71,8 @@
     }
   }
 
+
+  // NAV BUTTON STYLES
   .main-nav-button {
     line-height: 56px;
     display: inline-block;
@@ -59,6 +83,10 @@
     font-family: $brand-font;
     font-weight: 300;
     font-size: 16px;
+    border: none;
+    background: none;
+    border-radius: 0;
+    position: relative;
 
     &:hover {
       background: $ocean;
@@ -77,25 +105,24 @@
       left: ($unit * 2);
       z-index: $layer-1;
     }
+  }
+
+  // DROPDOWN TRIGGER BUTTON
+  .main-nav-mobile-trigger {
+    display: none;
+    padding-right: 30px + ($unit * 2);
+
+    .icon {
+      left: auto;
+      right: ($unit * 2);
+      opacity: .56;
+    }
 
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),
     screen and (max-width: $tablet-breakpoint) {
-      display: block;
-      float: none;
-      line-height: $unit * 6;
-      text-align: left;
-      font-size: 14px;
-      padding: 0px ($unit * 4);
-
-      &.has-icon {
-        padding: 0px ($unit * 4);
-        position: static;
-      }
-
-      .icon {
-        display: none;
-      }
+      display: inline-block;
+      float: right;
     }
   }
 }

public/resources/js/site.js

@@ -15,17 +15,26 @@ var angularIO = angular.module('angularIOApp', ['ngMaterial'])
 });
 
 
-angularIO.controller('AppCtrl', ['$scope', '$mdSidenav', '$mdDialog', function($scope, $mdSidenav, $mdDialog){
-  $scope.toggleSidenav = function(menuId) {
-    $mdSidenav(menuId).toggle();
+/*
+* Apllication Controller
+*
+*/
+
+angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
+
+  // TOGGLE MAIN NAV (TOP) ON MOBILE
+  $scope.toggleMainMenu = function(event) {
+    $scope.showMainNav = !$scope.showMainNav;
   };
 
+
+  // TOGGLE DOCS VERSION & LANGUAGE
   $scope.toggleVersionMenu = function(event) {
     $scope.showMenu = !$scope.showMenu;
-
-    item.toggleClass('is-hidden');
   };
 
+
+  // SHOW FULL ABOUT US PAGE BIO
   $scope.showBio = function (event) {
     var bio = angular.element(event.currentTarget).text();
     console.log(bio);