在视口中固定的Angular 7 Material Sidenav

Question

在使用本示例的情况下，我遇到了一个很大的问题，该示例来自材料的SideNav Example

我不希望我的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>

这是它的图片