如何使可切换的 mat-sidenav 推送在 mat-sidenav-content 中也固定为 header

Question

I'm using the mat-sidenav-container to create the desktop version of my page, but I want to make the mat-sidenav toggleable, which I've already managed to do. The problem now is that I have a fixed header on the mat-sidenav-content, and that part is not being pushed when the mat-sidenav is displayed.

For the mat-sidenav-content I'm using the css grid to divide this section into two parts (the fixed header and the main content)

Here's a stackblitz demo .

Do you have any idea how I can make the mat-sidenav push also the fixed header?

Thanks.

Answer 1

You have to remove these styles from .content__header :

height: 12rem;
position: fixed;
left: 0;

and add position: sticky to it. Because of the position: fixed , the block could not be pushed to the side by the sidebar and because of the fixed height, it overflowed when the position: fixed was removed. The height was especially not needed, as you already specified it in your .content class with this: grid-template-rows: 12rem auto; . Changing it to position: sticky makes the header still be there on scroll, but also be pushed to the side. Important is that top: 0 is still there.

The .content__header class should now look like this:

.content__header {
  background-color: #eee;
  width: 100%;
  position: sticky;
  top: 0;
  padding: 0.5rem 1rem;
  z-index: 3;
}

Answer 2

In Angular 14 I tried the following mat-sidenav-container and it works. Let me know how it goes for you.

 .app-sidenav-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #eee; }.app-sidenav-content { display: flex; height: 100%; align-items: center; justify-content: center; }.app-sidenav { padding: 50px; }

 <mat-sidenav-container class="app-sidenav-container"> <mat-sidenav #sidenav mode="side" class="app-sidenav"> <mat-toolbar color="primary"> Contacts </mat-toolbar> <mat-list role="list"> <mat-list-item role="listitem">Item 1</mat-list-item> <mat-list-item role="listitem">Item 2</mat-list-item> <mat-list-item role="listitem">Item 3</mat-list-item> </mat-list> </mat-sidenav> <div class="app-sidenav-content" > <app-toolbar></app-toolbar> <router-outlet></router-outlet> <button type="button" mat-button (click)="(sidenav.opened)? sidenav.close(): sidenav.open()"> Open Sidenav </button> </div> </mat-sidenav-container>