각 재료에 햄버거 버튼을 추가하는 방법

Question

나는이 템플릿을 이미 plunker에서 발견했지만 화면이 600px 이하이면 sidenav가 사라집니다. sidenav 메뉴를 표시하거나 숨기려면 햄버거 버튼을 추가하려면 어떻게해야합니까?

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

Answer 1

나는 변경 후 조금 home.view.html 및 home.controller.js 내가 당신이 원하는 방법을했다 생각합니다.

<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> 

및

(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'); 

     }]) 
})();