Angular2 Material2 - sidenav independent from content

Question

I'm trying to use material2 sidenav component. I want it to be separate from content. Just a full-height sidebar that slides there and back - without any sidenav-layout as it creates some unwanted things in my app layout.

What I want looks really close to https://inbox.google.com/u/0/?pli=1 sidenav. What I currently have is:

Answer 1

If you want to separate side bar and main content, Use the bootstrap column classes to achieve as below,

<md-sidenav-container class="container-fluid">
  <div class="col-md-1">
    <button md-button (click)="sidenav.open()">
      <i class="fa fa-list"></i>
    </button>
  </div>
  <div class="col-md-11">
    Main content goes here
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <md-sidenav #sidenav class="example-sidenav">
   Manu bar
  </md-sidenav>

</md-sidenav-container>

Note:Break tags are added to increase the height of the content.

LIVE DEMO