角mat-sidenav属性：（isHandset $ | async）我没明白

Question

  <mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="!(isHandset$ | async)">
    <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)="mat-sidenav.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Logo</span>
      <span class="spacer"></span>
      <a href="#">Opciones</a>
    </mat-toolbar>

  </mat-sidenav-content>
</mat-sidenav-container>

大家好，我最近刚开始使用Angular和Angular Material。生成所有这些代码，就可以理解了，但是在isHandset异步部分中，我迷路了。实际上，我在互联网上阅读，并且知道它与根据设备显示或不显示内容有关，事实是，这使一切变得复杂，因为切换sidenav的汉堡菜单仅出现在MOBILE中，但是而不是在台式机上，我需要在两种设备（台式机和移动设备）上都能看到它，我需要修改什么？如果有人可以解释我，最终目的是学习

谢谢！