angular-material-npfixed/src/components/sidenav/demoCustomSidenav/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="AppCtrl" layout="column" style="height: 500px;" ng-cloak>

  <section layout="row" flex>

    <md-sidenav class="md-sidenav-left" md-component-id="left"
                md-disable-backdrop="" md-whiteframe="4">

      <md-toolbar class="md-theme-indigo">
        <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>