Как создать разворачивающийся/расширяемый сиднав с зазором с угловым материалом

Question

Я хочу иметь сидену с угловым материалом, который имеет 2 состояния: рухнул (показаны только значки предметов) и расширен (показаны значки + значки). Пример поведения показан at the RDash Dashboard, что, к сожалению, выполняется с помощью бутстрапа.

Поскольку уставка по умолчанию для углового материала не обеспечивает эту функцию, я хотел сделать это сам.

У меня есть 2 идеи о том, как это сделать:

1) с использованием 2 различных побочной NAVS: один для разрушиласи, один для расширена. Затем переключение между ними блокируется или просто скрывается/показывается всегда по одному.

2) используя только 1 sidenav. каким-то образом программным образом изменяют ширину и элементы sidenav и сохраняют ее открытыми.

Мой любимый подход был бы 2, но я хочу знать, есть ли какие-либо лучшие способы достижения такого рода сиденов с угловым материалом?

Answer 1

Я думаю, что подход 2 является лучшим - CodePen

Markup

<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp"> 
    <section layout="row" flex=""> 
    <md-sidenav class="md-sidenav-left" md-component-id="left" md-whiteframe="4" id="leftSideNav"> 
     <md-toolbar class="md-theme-indigo" layout="row"> 
     <h1 class="md-toolbar-tools">Sidenav Left</h1> 
     <span flex></span> 
     <md-button ng-click="toggleExpand()">{{toggleExpandButtonLabel}}</md-button> 
     </md-toolbar> 
     <md-content layout-padding=""> 
     <md-button ng-click="close()" class="md-primary"> 
      Close Sidenav Left 
     </md-button> 
     </md-content> 
    </md-sidenav> 

    <md-content flex="" layout-padding=""> 
     <div layout="column" layout-align="top center"> 
     <div> 
      <md-button ng-click="toggleLeft()" class="md-primary"> 
      Toggle left 
      </md-button> 
     </div> 
     </div> 
    </md-content> 
    </section> 
</div> 

JS

angular 
    .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
    .controller('AppCtrl', function ($scope, $timeout, $mdSidenav, $log, $element) { 
    $scope.toggleLeft = buildToggler('left'); 
    $scope.toggleExpandButtonLabel = "Expand"; 
    var sideNav = angular.element($element[0].querySelector('#leftSideNav')); 

    $scope.toggleExpand = function() { 
     if ($scope.toggleExpandButtonLabel == "Expand") { 
     sideNav.css("width", "500px") 
     } 
     else { 
     sideNav.css("width", "320px") 
     } 
     $scope.toggleExpandButtonLabel = ($scope.toggleExpandButtonLabel == "Expand") ? "Collapse" : "Expand"; 
    } 

    $scope.close = function() { 
     $mdSidenav('left').close(); 
     $scope.toggleExpandButtonLabel = "Expand"; 
     sideNav.css("width", "320px") 
    }; 

    function buildToggler(navID) { 
     return function() { 
     $mdSidenav(navID) 
      .toggle() 
      .then(function() { 
      $log.debug("toggle " + navID + " is done"); 
      }); 
     } 
    } 
});