Adjust the width of the mat-side-nav while it is open

Question

When the nav-bar is clicked open, the width of the nav-bar is to be adjusted automatically with the content.

 <mat-sidenav #sidenav  mode="side" class="primary-color main-sidenav nav- 
 shadow" opened="true" [@sidenavState]="sidenavState" 
 (@sidenavState.done)="endAnimation()" *ngIf="layout === 'modern' || 
 forceModern">
 ....
 </mat-sidenav>

When I set the width of the side-nav in SCSS as

.mat-side-nav{
   width: auto !important
 }

The nav-bar is opened by default without being clicked to open. Also it is not closed with the click

Answer 1

Your problem: when you are doing the below: .mat-side-nav{ width: auto !important }

This is kind of hard coding the width to take whatever it contains.

Solution: Find the class which is active while its open and set the width: auto, for that class.