I'm making an Angular 9 app and I want to add a sidenav to my project.
The sidenav that I want is exactly like this Primer Angular Template --> Primer - Angular 8+ Material
This is what I want
And This is what I got with my scss and html. The problem is that the content is not rezising when the sidebar is collapsed, and then, the style is breaking. For this I am looking for an answer with mat-sidenav-container
and mat-sidenav
HTML
<mat-sidenav-container class="app example-sidenav-container" autosize>
<mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true" [ngStyle]="{ 'width': !collapsedSidebar ? '250px':'70px' }">
<button mat-icon-button (click)="collapsedSidebar = !collapsedSidebar">
<mat-icon>menu</mat-icon>
</button>
</mat-sidenav>
<div fxFlex class="example-sidenav-content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>
SCSS
.app { height: 100vh; }
.example-container {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.example-sidenav-container { flex: 1; }
.example-sidenav{
-webkit-transition: width .4s;
transition: width .4s;
}
.mat-drawer{ background:White; }
.example-sidenav-content {
display: flex;
height: 100%;
background-color: #e8ded7;
opacity: 0.9;
}
.example-fill-remaining-space { flex: 1 1 auto; }
Please help
UPDATE Here is a Stackblitz example --> https://stackblitz.com/edit/angular-xa3n5i
I solved a similar problem in one of my apps before. I used ngClass
and a boolean controlling both mat-sidenav
width property and mat-sidenav-content
margin-left
property . Here is a stackblitz, i sliced out relevant part from that app.