Angular Material Sidenav should push not overlap

0
votes

Please check the code here : https://stackblitz.com/edit/angular-ztx27h

Here I am trying to implement the side nav where it does not hide , rather its width is reduced. and when the mouse is hovered over it, its width increases.

This is working fine.

Problem here is that when the width of the sidenav increases, it overlaps the contents.

Requirement is that it should push the mat-sidenav-content and both should be visible.

Right now, since it overlaps the contents of the right side are not visible when the sidenav expands.

Please let me know what should be done here to push the "mat-sidenav-content" and not overlap.

Regards, Ashish

1
angularangular-material

1 Answers

1
votes
<div [ngStyle]="{ 'margin-left.em': sidenavWidth - 4 }">
  <router-outlet></router-outlet>
</div>