css - Angular 7 Material Sidenav 固定在视口中

Question

使用材料的SideNav 示例中的这个示例我遇到了一个大问题

我不希望我的 sidenav 重叠在我的导航栏/工具栏上

这是我的代码

<mat-sidenav #drawer class="sidenav" 

    [fixedInViewport]="false" 

    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"

    >

  <mat-toolbar>Menu</mat-toolbar>
  <mat-nav-list>
      <li *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
          <a routerLinkActive="active" [routerLink]="[menuItem.path]" class="nav-link">

              {{menuItem.title}}
          </a>
      </li>
  </mat-nav-list>
</mat-sidenav>

这是它的图像