How to disable the background when sidenav is opened - html

Question

I am using angular material sidenav for some application settings functionality to achieve something like we have in Google.
The difference is I am calling this sidenav from another component and wrapping the router too so that it should open below the application Header.
<mat-sidenav-container class="main-sidenav">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
The problem is when I open the sidenav It does not disable the background. It should automatically implement the backdrop style. Is there any way I can explicitly provide some style for the same or should we consider some different component? Please suggest. Below is the sample stackblitz example for the same scenario
Stackblitz link

Answer 1

Set the hasBackdrop flag to true in your html:
<mat-sidenav-container class="main-sidenav" hasBackdrop="true">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
Per Material doc of sidenav:
Using your stackblitz, I have confirmed the backdrop renders by inspecting the elements:
But you are not seeing the dark shadow, because of missing css. To fix this, add following in your styles.css file.
.mat-drawer-backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
Also, to make the sidenav appear like the screenshot in your question, you need to add some css properties in sidenav class.
.sidenav {
margin-top: 35px;
margin-left: 25px;
display: block;
width: 200px;
height: 100%;
position: fixed;
background: #FFF;
}
Result:
Stackblitz Demo