<mat-toolbar>
  <a mat-icon-button routerLink="/" aria-label="Home Page" matTooltip="Pinpoint Home">
    <img src="assets/logo.svg" alt="Home Page" style="width: 24px; height: 24px;">
  </a>
  <span>Pinpoint</span>
  <span class="spacer"></span>
  <button mat-icon-button (click)="onHelpClick()" aria-label="Help" matTooltip="View Pinpoint documentation">
    <mat-icon>help</mat-icon>
  </button>
  <button mat-icon-button (click)="onBugClick()" aria-label="File a bug" matTooltip="File a bug report">
    <mat-icon>bug_report</mat-icon>
  </button>
  <button mat-icon-button [matMenuTriggerFor]="userMenu" aria-label="User menu" matTooltip="User options">
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>

<mat-menu #userMenu="matMenu" xPosition="before">
  <button mat-menu-item disabled>
    <span>{{ userEmail() }}</span>
  </button>
  <button mat-menu-item (click)="toggleTheme()">
    <mat-icon>{{ isDarkMode() ? 'light_mode' : 'dark_mode' }}</mat-icon>
    <span>{{ isDarkMode() ? 'Light theme' : 'Dark theme' }}</span>
  </button>
  <button mat-menu-item (click)="onSignOutClick()">
    <mat-icon>exit_to_app</mat-icon>
    <span>Sign out</span>
  </button>
</mat-menu>