<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Custom Sidenav</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.3/docs.css'>
</head>
<body>
<div ng-controller="AppCtrl" layout="column" style="height: 500px;" ng-cloak="" class="sidenavdemoCustomSidenav" ng-app="MyApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="about">Partial About</a></li>
<li><a ui-sref="page">Page</a></li>
<li><a ui-sref="pagetab">PageTab</a></li>
<li><a ui-sref="chuck">Chuck</a></li>
</ul>
<ul class="nav navbar-nav" ng-if="navCtrl.isLoggedIn()">
<li ui-sref-active="active"><a ui-sref="contacts">Contacts</a></li>
</ul>
<div class="collpase navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li ng-if="!navCtrl.isLoggedIn()">
<a href="#" ng-click="navCtrl.logIn($event)">
<span class="glyphicon glyphicon-log-in"></span>
Log in
</a>
</li>
<li ng-if="navCtrl.isLoggedIn()">
<a href="#" ng-click="navCtrl.logOut($event)">
<span class="glyphicon glyphicon-log-out"></span>
Log out
</a>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</nav>
<section layout="row" flex="">
<md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop="" md-whiteframe="4">
<md-toolbar class="navbar navbar-inverse">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin="">
<p>
This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
</p>
<md-button ng-click="toggleLeft()" class="md-accent">
Close this Sidenav
</md-button>
</md-content>
</md-sidenav>
<md-content flex="" layout-padding="">
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br>
This will disable the functionality to click outside to close the sidenav.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-raised">
Toggle Sidenav
</md-button>
</div>
</div>
</md-content>
</section>
</div>
<footer class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container" style="text-align:center;">
<p class="navbar-text">© 2017 - # & # & #</p>
</div>
</footer>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js'></script>
<script src="script.js"></script>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function ($scope, $timeout, $mdSidenav) {
$scope.toggleLeft = buildToggler('left');
$scope.toggleRight = buildToggler('right');
function buildToggler(componentId) {
return function() {
$mdSidenav(componentId).toggle();
};
}
});