Angular 2 Material 2 Sidenav Toolbar collapse like Navigation Drawer

Question

I have a sidenav and a nested toolbar
toolbar.html

Answer 1

This can be achieved using a simple css hack. We can call methods increase() and decrease() that changes the width of sidenav based on some event like mouseenter and mouseleave or in your case onClick of "toolbar-menu-button"

This will incerese the width of sidenav when we point on sidenav and decrease the width when we point the mouse pointer at some other place.

  increase(){
    this.sidenavWidth = 15;
  }
  decrease(){
    this.sidenavWidth = 4;
  }

Have a look at this demo :- https://mini-sidenav.firebaseapp.com/

and the github repo :- https://github.com/Ravi-Rajpurohit/mini-md-sidenav

I hope this helps :-)