show and hide sidenav according to device width. add nav button

buildbot · Apr 16, 2015 · 9a22121 · 9a22121
1 parent 84a9cff
commit 9a22121
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/www/md_base/src/app/app.controller.coffee b/www/md_base/src/app/app.controller.coffee
@@ -1,5 +1,9 @@
 class App extends Controller
     title: ''
-    constructor: ($scope, $rootScope)->
+
+    openMenu: ->
+        @$mdSidenav('left').open()
+
+    constructor: ($scope, $rootScope, @$mdSidenav)->
         $rootScope.$on '$stateChangeSuccess', (event, toState) =>
             @title = toState.name
diff --git a/www/md_base/src/app/common/directives/sidenav/sidenav.tpl.jade b/www/md_base/src/app/common/directives/sidenav/sidenav.tpl.jade
@@ -1,6 +1,6 @@
 md-sidenav.md-whiteframe-z1(
   md-component-id="left",
-  md-is-locked-open="$mdMedia('gt-md')"
+  md-is-locked-open="$mdMedia('gt-sm')"
 )
     md-toolbar(layout="row")
       md-icon.logo(md-svg-icon="navicon")

diff --git a/www/md_base/src/app/index.jade b/www/md_base/src/app/index.jade
@@ -17,6 +17,8 @@ html(ng-app="app", ng-controller="appController as app")
       div(layout="column", role="main", flex)
         md-toolbar.topbar
           div.md-toolbar-tools
+            md-button.nav-button(hide-gt-sm, ng-click="app.openMenu()")
+              md-icon(md-svg-icon="navicon")
             b Buildbot
             span.title(ng-bind="app.title")
         md-content.md-padding(flex, ui-view)

diff --git a/www/md_base/src/styles/main-content.less b/www/md_base/src/styles/main-content.less
@@ -12,6 +12,14 @@
     margin-left: 30px;
     text-transform: capitalize;
   }
+
+  .nav-button {
+     margin-right: 20px;
+
+     svg {
+        fill: #333;
+     }
+  }
 }
 
 md-content[ui-view].md-default-theme {

diff --git a/www/md_base/src/styles/sidenav.less b/www/md_base/src/styles/sidenav.less
@@ -1,6 +1,7 @@
 md-sidenav {
+  background: #212121 !important;
   md-content.md-default-theme {
-    background: #212121 !important;
+    background: transparent !important;
   }
 
   md-icon {