Sidenav с иконками в «боковом» режиме

Question

Я пытаюсь сделать sidenav с иконками, которые «исправлены» и часть плавающая, с кнопкой для отключения плавающего. как здесь http://angular-material.fusetheme.com/apps/dashboards/project

HTML:

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">
  <mat-sidenav-container #snavcont class="sidenav" [style.marginTop.px]="mobileQuery.matches ? 56 : 0" [hasBackdrop]="false" autosize="false">
<mat-sidenav #snav [mode]="'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
      (mouseenter)="stickyEnter()" (mouseleave)="stickyLeave()" opened>
      <button mat-icon-button (click)="stickyMenu()">
        <mat-icon>menu</mat-icon>
      </button>

      <mat-nav-list class="ml-0" dense>
        <mat-list-item>
          <p matLine *ngIf="isExpanded">test</p>
          <div class="icon-container">
            <mat-icon mat-list-icon>home</mat-icon>
          </div>
        </mat-list-item>
      </mat-nav-list>

    </mat-sidenav>
    <mat-sidenav-content>
      <mat-toolbar color="primary" class="example-toolbar">
        <h1 class="example-app-name">Responsive App</h1>
      </mat-toolbar>

      <p *ngFor="let content of fillerContent">{{content}}</p>

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

Файл TS:

      stickyEnter(): void {
    this.isExpanded = true;
  }

  stickyLeave(): void {
    this.isExpanded = this.isSticky
  }

  stickyMenu(): void {
    if (this.isSticky) {
      this.snavcont.autosize = true;
      this.snav.mode = "over"
    }
    else {
      this.snavcont.autosize = true;
      this.snav.mode = "side"
    }

    this.isSticky = !this.isSticky;
  }

Как я не должен продолжать?