Angular Material 6注销按钮没有响应地适合水平导航栏

Question

我在sidenav-content内有一个带有水平栏的导航栏：

<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="warn">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [matMenuTriggerFor]="menu">Registration<mat-icon>arrow_drop_down</mat-icon></a>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>Units</button>
        <button mat-menu-item>Households</button>
        <button mat-menu-item>Individuals</button>
      </mat-menu>

      <a mat-list-item>Distribution</a>

      <a mat-list-item (click)="logout()">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="warn">
      <!-- <mat-icon class="back-icon" (click)="goBack()">navigate_before</mat-icon> -->
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon>menu</mat-icon>
      </button>

      <span>Registration System</span>

      <span class="spacer"></span>
      <img class="imageWidth" [src]="img">
      <span class="spacer"></span>
      <!-- <span *ngIf="connectionStatus">
        <mat-icon>signal_wifi_3_bar</mat-icon> Connection Available
      </span>
      <span *ngIf="!connectionStatus">
        <mat-icon>signal_wifi_off</mat-icon> No Connection
      </span>-->
      <span class="fill-remaining-space"></span>
      <button mat-raised-button (click)="logout()">
        <mat-icon>account_circle</mat-icon>Logout</button>

    </mat-toolbar>
    <!-- <router-outlet></router-outlet> -->
  </mat-sidenav-content>
</mat-sidenav-container>

当我尝试检查导航栏是否与某些Android手机兼容时， 看来注销按钮从栏上消失，如下所示：

这是描述问题的有效堆栈炸弹：

https://angular-yxlerb.stackblitz.io/

注销按钮应适合水平导航栏。现在，我已经在侧面导航栏中添加了注销按钮，但我想将其保留在顶部。