md-sidenav toggle() is on top of the md-toolbar
I want to be able to toggle a sidenav without hiding the top left part of the md-toolbar, similiar to how Google Inbox works:
It seems like the toggle function is causing it, because without the animation, the sidenav in showing underneath the md-toolbar.
Is that possible?
<body layout="column" ng-controller="mainCtrl">
<md-toolbar layout="column" class="md-medium-tall"><span flex="flex"></span>
<div class="md-toolbar-tools">
<md-button class="menu" ng-click="toggleLeft()">
<md-icon md-svg-src="assets/svg/menu.svg"></md-icon>
</md-button>
<div layout="row" flex="flex" class="fill-height">
<div class="md-toolbar-item md-breadcrumb">
<span>Title</span></div>
<span flex="flex"></span>
</div>
</div>
</md-toolbar>
<div layout="row">
<md-sidenav layout="column" md-component-id="left" class="md-whiteframe-z2 md-sidenav-left" >
<md-list>
<md-list-item>
<md-button>Hey</md-button>
</md-list-item>
</md-list>
</md-sidenav>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="js/app.js"></script>
and the app.js
var app = angular.module('anApp', ['ngMaterial'])
.controller('mainCtrl', ['$scope', '$mdSidenav', '$mdUtil', function ($scope, $mdSidenav, $mdUtil) {
$scope.toggleLeft = buildToggler('left');
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function () {
$mdSidenav(navID)
.toggle()
}, 100);
return debounceFn;
}}]);
Thanks!
Answer
I also had the same problem and @William S's solution didn't work for me. SideNav won't show properly if it has relative position. i got it working by putting SideNav and Content in a <md-content flex></md-content>:
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" ng-click="openLeftMenu()">Menu</md-button>
</div>
</md-toolbar>
<md-content flex>
<md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column">
<md-list>
<md-list-item>
<md-item-content md-ink-ripple>
<div class="inset">Item 1</div>
</md-item-content>
</md-list-item>
</md-list>
</md-sidenav>
<md-content>Content</md-content>
</md-content>