Wie Hamburgere Taste in Winkelmaterial sidenav

Question

Ich fand schon diese Vorlage in Plunker aber die sidenav verschwindet, wenn der Bildschirm 600 Pixel oder weniger, wie füge ich Hamburgere Taste ein- und ausblenden das sidenav Menü hinzufügen?

http://embed.plnkr.co/d3zExiS03YNOMLHdfEIj/preview

Answer 1

Nachdem ich verändert ein wenig home.view.html und home.controller.js Ich glaube, ich machte es, wie Sie wollen.

<div layout="row"> 
    <section layout="column" layout-fill> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"> 
     <md-toolbar class="md-toolbar-tools" md-scroll-shrink> 
     <h3>My App Title</h3> 
     <md-button aria-label="Close" class="md-icon-button" ng-click="vm.toggleMenu()" hide-gt-sm> 
      X 
     </md-button> 
     </md-toolbar> 
     <md-content role="navigation"> 
     <ul class="side-menu"> 
      <li ng-repeat="section in vm.menu.sections" class="parent-list-item" 
       ng-class="{'parentActive' : vm.isSectionSelected(section)}"> 
      <h2 class="menu-heading" ng-if="section.type === 'heading'" 
       id="heading_{{ section.name | nospace }}"> 
       {{section}} 
      </h2> 
      <menu-link section="section" ng-if="section.type === 'link'"></menu-link> 
      <menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle> 
      </li> 
     </ul> 
     </md-content> 
    </md-sidenav> 
    <md-toolbar hide-gt-sm> 
     <md-button aria-label="Menu" class="md-icon-button" ng-click="vm.toggleMenu()"> 
      <svg style="width:24px;height:24px" viewBox="0 0 24 24"> 
       <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /> 
      </svg> 
     </md-button> 
    </md-toolbar> 
    <md-content flex> 
     <ui-view name="content"></ui-view> 
    </md-content> 
    </section> 
</div> 

und

(function(){ 
    'use strict'; 

    angular.module('myMenuApp.controllers') 

.controller('HomeCtrl', [ 
     '$rootScope', 
     '$log', 
     '$state', 
     '$timeout', 
     '$location', 
     'menu', 
     '$mdSidenav', 
     '$mdUtil', 
     function ($rootScope, $log, $state, $timeout, $location, menu, $mdSidenav, $mdUtil) { 

     var vm = this; 
     var aboutMeArr = ['Family', 'Location', 'Lifestyle']; 
     var budgetArr = ['Housing', 'LivingExpenses', 'Healthcare', 'Travel']; 
     var incomeArr = ['SocialSecurity', 'Savings', 'Pension', 'PartTimeJob']; 
     var advancedArr = ['Assumptions', 'BudgetGraph', 'AccountBalanceGraph', 'IncomeBalanceGraph']; 

     function isOpen(section) { 
      return menu.isSectionSelected(section); 
     }; 

     function toggleOpen(section) { 
      menu.toggleSelectSection(section); 
     }; 

     //handler to open/close a SideNav; when animation finishes report completion in console 
     function buildToggler(navID) { 
      return $mdUtil.debounce(function() { 
      $mdSidenav(navID).toggle(); 
      }, 300); 
     }; 

     //functions for menu-link and menu-toggle 
     vm.isOpen = isOpen; 
     vm.toggleOpen = toggleOpen; 
     vm.autoFocusContent = false; 
     vm.menu = menu; 

     vm.status = { 
      isFirstOpen: true, 
      isFirstDisabled: false 
     }; 

     vm.toggleMenu = buildToggler('left'); 

     }]) 
})();