title: Angular Material Side Bar with "Half" side mode
body: <p>I am working on the dynamic side bar for our project, basically what we want to do is to set up a dynamic side bar when user click on the side bar it will spread when user click back sidebar should collapse and show only icons (but not totally collapse it will keep the icons) for example before user click the icon. We are using sidenav.toggle()from angular material function which basically closes the sidebar completely and if I don't use toggle() function "Side" mode for navbar does not work. So I want collapse to icon with side mode. (The other reason we need to keep the side mode is that we also need to make sure when user spread the sidebar, right side content should push to right)</p>
  
  <p><a href="https://i.stack.imgur.com/zbjIK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zbjIK.png" alt="enter image description here"></a></p>
  
  <p>After user click the icon <a href="https://i.stack.imgur.com/5A5JL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5A5JL.png" alt="enter image description here"></a></p>
  
  <p>Is there a way to do that?</p>
  
  <p>Thanks.</p>