Question

我正在尝试创建一个类似于仪表板的界面，在该界面的顶部有一个永久的标题工具栏，在左侧有一个可折叠的sidenav。我在这里和那里一直在尝试许多事情，而这与我所获得的接近：

HTML：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()">
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/']">Home</a>
      <a mat-list-item [routerLink]="['/locations']">Current Destinations</a>
      <a mat-list-item [routerLink]="['/orders']">Today's Orders</a>
      <a mat-list-item [routerLink]="['/logout']">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="top-bar" color="primary">
      <span>App Title</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

CSS：

.sidenav-container {
    height: 100%;
}

.sidenav {
    display: flex;
    width: 200px;
    box-shadow: 3px 0 6px rgba(0,0,0,.24);
}
.top-bar {
    position: fixed;
    top: 0;
    z-index:1000;
}

问题在于，sidenav保持在原位，并且顶部的工具栏是隐藏的东西，以及路由器出口的内容。它必须是相反的方式，但我似乎无法理解。 This answer到另一个问题很接近，但是在这种情况下，左侧的链接最终出现在滚动条中，滚动条没有超出顶部工具栏的底部。同样，它似乎使用了较旧版本的Material Design或其他版本。我想念什么？

Answer 1

当我从Material网站偶然发现一个stackblitz示例时，我终于解决了这个问题。这是文章：

Material - Creating a Responsive Layout for Mobile App Desktop

这是它的stackblitz示例：

https://stackblitz.com/angular/pymganppqmm

角度-工具栏被抽屉而不是sidenav隐藏

1 个答案: