<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>
