<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      @for (item of menuItems; track item.route) {
        <a mat-list-item [routerLink]="item.route" (click)="toggleDrawer()">
          <mat-icon matListItemIcon>{{ item.icon }}</mat-icon>
          <span>{{ item.name }}</span>
        </a>
      }
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      @if (isHandset$ | async) {
        <button
          type="button"
          aria-label="Toggle sidenav"
          mat-icon-button
          (click)="drawer.toggle()">
          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
      }
      <span>{{ title }}</span>
      <span class="spacer"></span>  <!-- Spaziatore per allineare a destra -->
      @if (authService.isAuthenticated$ | async) {
        <button mat-button (click)="authService.logout()">Logout</button>
      }
    </mat-toolbar>
    <main class="main-content">
      <router-outlet />
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>
