added left sidebar menu

Author: SebastianMetzger

controllers/controllers.js

@@ -1,6 +1,6 @@
 // Include app dependency on ngMaterial
 var app = angular.module( 'YourApp', [ 'ngMaterial' ] );
-app.controller("YourController", ['$scope', '$mdDialog', function($scope, $mdDialog) {
+app.controller("YourController", ['$scope', '$mdDialog', '$mdSidenav', function($scope, $mdDialog, $mdSidenav) {
 
     $scope.openDialog = function($event) {
         $mdDialog.show({
@@ -24,6 +24,10 @@ app.controller("YourController", ['$scope', '$mdDialog', function($scope, $mdDia
         }
     };
 
+    $scope.toggleMenu = function(){
+        $mdSidenav('left').toggle();
+    };
+
     $scope.chunks = [
         {
             title: "Something",

index.html

@@ -10,13 +10,22 @@
 <header>
     <md-toolbar scroll-shrink>
         <div class="md-toolbar-tools">
+            <md-button ng-click="toggleMenu()">Menu</md-button>
             <h3>
                 <span>Angular Material Inbox</span>
             </h3>
         </div>
     </md-toolbar>
 </header>
 <div layout="vertical" flex>
+    <md-sidenav class="md-sidenav-left" component-id="left">
+        <md-toolbar class="md-theme-indigo">
+            <h1 class="md-toolbar-tools">Sidenav Left</h1>
+        </md-toolbar>
+        <md-content flex>
+            <p>Stuff</p>
+        </md-content>
+    </md-sidenav>
     <md-content layout="horizontal" layout-align="center">
         <md-list id="content">
             <div ng-repeat="chunk in ::chunks">
@@ -54,7 +63,7 @@ <h2>Some Post</h2>
     </md-content>
 </div>
 
-<div layout="vertical" layout-align="space-between" style="height: 260px; position: fixed; right: 40px; bottom: 90px;" ng-if="showAddButtons" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
+<div id="fab-popup" layout="vertical" layout-align="space-between" ng-if="showAddButtons" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
     <md-button class="md-fab md-raised" ng-click="openDialog($event);" aria-label="New document">
         <md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
         <md-tooltip>
@@ -84,18 +93,6 @@ <h2>Some Post</h2>
 <md-button id="mainFab" class="md-fab md-raised" ng-click="showAddButtons = !showAddButtons;" aria-label="New document">
     <md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
 </md-button>
-<!--<md-bottom-sheet class="md-list md-has-header">-->
-    <!--<md-subheader>Comment Actions</md-subheader>-->
-    <!--<md-list>-->
-        <!--<md-item ng-repeat="item in items" ng-click="showGridBottomSheet($event)">-->
-            <!--<md-button>-->
-                <!--&lt;!&ndash; Using custom inline icon until md-icon is ready. DONT USE ME! &ndash;&gt;-->
-                <!--<md-inline-list-icon icon="{{item.icon}}"></md-inline-list-icon>-->
-                <!--<span class="md-inline-list-icon-label">{{ item.name }}</span>-->
-            <!--</md-button>-->
-        <!--</md-item>-->
-    <!--</md-list>-->
-<!--</md-bottom-sheet>-->
 
 <script src="/bower_components/angular/angular.js"></script>
 <script src="/bower_components/angular-aria/angular-aria.js"></script>

style.css

@@ -29,6 +29,10 @@ md-card {
     opacity: 0;
 }
 
+.animate-enter.animate-enter-active {
+    opacity: 1;
+}
+
 .round-face {
     border-radius: 30px;
     border: 1px solid #ddd;
@@ -39,7 +43,7 @@ md-card {
 
 #mainFab {
     position: fixed;
-    right: 42px;
+    right: 2%;
     bottom: 24px;
     background-color: #db4437;
 }
@@ -48,6 +52,13 @@ md-card {
     fill: white;
 }
 
+#fab-popup {
+    height: 260px;
+    position: fixed;
+    right: 2%;
+    bottom: 90px;
+}
+
 #content {
     min-width: 70%;
 }