md-sidenav toggle() is on top of the md-toolbar

Asked 12/7, 2015 at 8:51 Answered 10/11, 2016 at 18:36

Solved javascript jquery angularjs angularjs-material

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:

_{(source: cbsistatic.com)}

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!

Farceuse answered 12/7, 2015 at 8:51 Comment(0)

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>

Heroworship answered 11/11, 2015 at 12:4 Comment(1)

I knew my info would because outdated someday. Thanks Pouya. – Buckbuckaroo 16/12, 2015 at 19:8

Small Update: Please note that this answer is for Angular Material 0.10.1. As Angular Material is still very young, this solution may not work forever, or will become redundant.

For making the top bar overlap the sidenav, you have to give it a higher z-index than the sidenav (anything over z-index: 60 will do)

HTML

  <md-toolbar layout="column" class="main-toolbar md-medium-tall">
    <span flex="flex">
      <h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
    </span>
  </md-toolbar>

CSS

.main-toolbar {
  /* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */
  z-index: 61;

  /* Cosmetic */
  background-color: green;
}

This however will make the top part of the right sidenav to be overlapped, which might not be what you'd want.

For making the sidenav appear below the top bar, you need to change it from absolute positioning to relative, and change display type to block.

For this, you'll have to override some CSS of the sidenav element, and put the right sidenav within a div that follows layout="row".

HTML

<div layout="row">
    <!-- your sidenav -->
</div>

CSS

.md-sidenav-right {
  /* Cosmetic, show where the fill starts */
  background-color: pink;

  /* Override from absolute to relative */
  position: relative;

  /* Change to block display */
  display: block;
}

Here is a codepen utilizing both changes above. Base code taken from the angular-material demo, version 0.10.1.

http://codepen.io/qvazzler/pen/mJGrya

Buckbuckaroo answered 21/7, 2015 at 8:57 Comment(0)

HTML Code

<md-toolbar hide-gt-md>
<div class="md-toolbar-tools">
    <md-button class="md-icon-button" aria-label="Menu Button" hide-gt-md ng-click="onClickMenu();">
        <md-icon md-svg-icon="menu.svg" aria-label="Menu Icon"> </md-icon>
    </md-button> <h2>Title</h2> <span flex></span>
</div>

JS Code

$scope.onClickMenu = function () {
    $mdSidenav("left").toggle();
};

Find Complete Detail for md-toolbar on following link

Complete Detail for md-toolbar

Actium answered 10/11, 2016 at 18:36 Comment(0)

Recommended topics

Hot tags