angularsassangular-materialmat-sidenav

Collapsable mat-sidenav menu rezise content not working

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

enter image description here

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

enter image description here

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

Solution

  • 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.

    https://stackblitz.com/edit/angular-mff93r