<div class="page page-material"> <!-- page header --> <div class="pageheader"> <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2> <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a> </li> <li> <a href="javascript:;">Material UI</a> </li> <li> <a ui-sref="app.material.sidenav">{{page.title}}</a> </li> </ul> </div> </div> <!-- /page header --> <!-- page content --> <div class="pagecontent"> <div flex layout="column"> <section class="demo-container md-whiteframe-z1"> <md-toolbar> <div class="md-toolbar-tools"> <md-button class="md-icon-button" aria-label="Settings"> <md-icon md-font-icon="zmdi zmdi-menu"></md-icon> </md-button> <h2> <span>Basic Usage</span> </h2> <span flex></span> <md-menu md-position-mode="target-right target"> <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()"> <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon> </md-button> <md-menu-content width="4"> <md-menu-item ng-repeat="item in [1, 2, 3]"> <md-button> Option {{item}} </md-button> </md-menu-item> </md-menu-content> </md-menu> </div> </md-toolbar> <md-content layout="column" style="height:500px"> <section layout="row" flex> <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')"> <md-toolbar class="md-theme-indigo"> <h1 class="md-toolbar-tools">Sidenav Left</h1> </md-toolbar> <md-content layout-padding ng-controller="mtSidenavLeftCtrl"> <md-button ng-click="close()" class="md-primary" hide-gt-md> Close Sidenav Left </md-button> <p hide-md show-gt-md> This sidenav is locked open on your device. To go back to the default behavior, narrow your display. </p> </md-content> </md-sidenav> <md-content flex layout-padding> <div layout="column" layout-fill layout-align="top center"> <p> The left sidenav will 'lock open' on a medium (>=960px wide) device. </p> <p> The right sidenav will focus on a specific child element. </p> <div> <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md> Toggle left </md-button> </div> <div> <md-button ng-click="toggleRight()" class="md-primary"> Toggle right </md-button> </div> </div> <div flex></div> </md-content> <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right"> <md-toolbar class="md-theme-light"> <h1 class="md-toolbar-tools">Sidenav Right</h1> </md-toolbar> <md-content ng-controller="mtSidenavRightCtrl" layout-padding> <form> <md-input-container> <label for="testInput">Test input</label> <input type="text" id="testInput" ng-model="data" md-sidenav-focus> </md-input-container> </form> <md-button ng-click="close()" class="md-primary"> Close Sidenav Right </md-button> </md-content> </md-sidenav> </section> </md-content> </section> </div> </div> <!-- /page content --> </div>