如何在Angular材质中创建超级菜单

<mat-sidenav-container>
  <mat-sidenav opened mode="side">
    <mat-nav-list>
      <mat-list-item>
        <mat-icon>home</mat-icon>
        <a matLine href="#">Home</a>
      </mat-list-item>
      <mat-list-item>
        <mat-icon>dashboard</mat-icon>
        <a matLine href="#">Dashboard</a>
      </mat-list-item>
      <mat-list-item>
        <mat-icon>settings</mat-icon>
        <a matLine href="#">Settings</a>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <!-- 页面内容 -->
  </mat-sidenav-content>
</mat-sidenav-container>

import { Component } from '@angular/core';

@Component({
  selector: 'app-super-menu',
  templateUrl: './super-menu.component.html',
  styleUrls: ['./super-menu.component.css']
})
export class SuperMenuComponent {
  isMenuOpen = false;

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }
}

<button mat-icon-button (click)="superMenu.toggleMenu()">
  <mat-icon>menu</mat-icon>
</button>
<app-super-menu #superMenu></app-super-menu>