当侧面导航栏出现在手机屏幕上时，Angular 8 Flex Layout不会隐藏垫工具栏选项

Question

以下与angular，angular material和flex-layout项目相关的html脚本中出现2个错误：

 <div class="main-bar">
  <mat-sidenav-container  class="sidenav-container">
    <mat-sidenav fxLayout="row" fxLayoutAlign="end center" #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false" color="primary"
      fxLayout="column" fxHide.gt-sm="true">
      <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>
        <div class="flex-items">
          <div>
            <img class="logo" src="../../assets/logo.png">
          </div>
          <div fxHide.gt-md="false">
            <a mat-list-item>Home</a>
          </div>
        </div>
      </mat-toolbar>
    </mat-sidenav-content>

  </mat-sidenav-container>
</div>

第一个问题是，当屏幕较小或至少在移动/标签设备上打开时，工具栏上的Home和其他页面按钮应消失，以便在sidenav内部进行替换。没发生。

我正在使用<mat-sidenav fxLayout="row" fxLayoutAlign="end center"将menu图标移到工具栏的末尾，而且也不起作用。

第二个错误是菜单图标的后面带有背景，如上图所示。

我正在使用fxHide.gt-sm="true"仅在可以正常工作的手机上显示sidenav，而其他人则不能。

这里是stackblitz。