will help you This problem is little unusual. Since the button from toolbar is controlling the open and close state, I had to add an EventListener to pass the state of sidenav whenever the button is clicked. Based on the event flag, I added some ngStyle that will maintain the width of sidenav. Note that, the sidenav is always open now [add property opened="true"], since it's always visible. I also ended up using the emitted flag from toolbar to use for 'Sidenav' title. You can remove it if you need to show the partial 'Sid'.
This might help you All of this behavior is what you have coded. You've made the button conditional so that it will only show for handset media types. You've also set the drawer to be fixed open in 'side' mode if not a handset. And you placed the toolbar inside the sidenav not above it. Stop doing those things to get the behavior you want: