在Angular中如何創建一個響應式的導航菜單

要創建一個響應式導航菜單，可以使用Angular的Router模塊和Angular Material庫。以下是一個簡單的示例：

1. 首先，在app.module.ts中導入RouterModule和MatSidenavModule：

import { RouterModule } from '@angular/router';
import { MatSidenavModule } from '@angular/material/sidenav';

@NgModule({
  imports: [
    RouterModule,
    MatSidenavModule
  ]
})

2. 創建一個AppComponent，包含一個側邊導航菜單和主要內容區域：

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" opened="true">
    <mat-nav-list>
      <a mat-list-item routerLink="/home">Home</a>
      <a mat-list-item routerLink="/about">About</a>
      <a mat-list-item routerLink="/contact">Contact</a>
    </mat-nav-list>
  </mat-sidenav>
  
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

3. 設置路由，創建對應的組件：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})

4. 編寫各個組件的模板和樣式。

這樣，當用戶點擊導航菜單中的鏈接時，Angular會根據路由顯示相應的組件內容。同時，側邊導航菜單會根據屏幕尺寸的變化自動調整顯示方式，實現了響應式的導航菜單。