如何将 mat-sidenav 放置在 mat-toolbar 下

Question

我有这个代码stackbliz:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>youtube-angular</span>
    </mat-toolbar>
    <app-dashboard></app-dashboard>
  </mat-sidenav-content>
</mat-sidenav-container>

当前显示在垫子工具栏上方的左侧边栏。

我想要的是将 mat-sidenav 基本上放在 mat-toolbar 下，就像它在 gmail 上的工作方式一样。

我还希望左侧工具栏的行为类似于 gmail 上的工具栏。

你会怎么做？

Answer 1

只需将 top: <your_toolbar_size>px !important; 添加到您的 .sidenav class。

编辑：

请看这个stackblitz。

如何将 mat-sidenav 放置在 mat-toolbar 下

How to place mat-sidenav under the mat-toolbar

angular-material

angular