折叠angular 7上的响应式导航栏

ng new my-app

ng generate component navbar

<!-- navbar.component.html -->
<mat-toolbar color="primary">
  <button mat-icon-button (click)="toggleNavbar()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="over">
    <!-- 导航菜单内容 -->
    <a mat-list-item routerLink="/">Home</a>
    <a mat-list-item routerLink="/about">About</a>
    <a mat-list-item routerLink="/contact">Contact</a>
  </mat-sidenav>

  <mat-sidenav-content>
    <!-- 主要内容 -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

// navbar.component.ts
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  isNavbarCollapsed = true;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
      this.isNavbarCollapsed = result.matches;
    });
  }

  toggleNavbar() {
    this.isNavbarCollapsed = !this.isNavbarCollapsed;
  }
}