title: how to create a collapsable/expandable open-locked sidenav with angular material
body: <p>I want to have a sidenav with angular material which has 2 states: collapsed (only icons of the items are shown) and expanded (labes + icons shown). The example behaviour is shown <a href="http://rdash.github.io/#/" rel="nofollow">at the RDash Dashboard</a>, which is unfortunetally done with bootstrap. </p>
  
  <p>Since the default sidenav of angular material does not provide that feature, I wanted to do it myself. </p>
  
  <p>I have 2 ideas on how to do it:</p>
  
  <p>1) using 2 different side-navs: one for collapsed, one for expanded. Then switching open-locked between them or just hiding/showing always one at a time.</p>
  
  <p>2) using only 1 sidenav. somehow programmatically change the width, and the items of the sidenav and keeping it open-locked.</p>
  
  <p>My favourite approach would be 2, but I want to know if there are any better ways to achieve that kind of sidenav with angular material?</p>