listify/listify-client/src/app/app.html

<mat-toolbar class="app-toolbar">
  @if (auth.isAuthenticated()) {
    <button
      mat-icon-button
      type="button"
      class="menu-button"
      aria-label="Menü öffnen"
      (click)="toggleSidebar()"
    >
      <mat-icon aria-hidden="true">menu</mat-icon>
    </button>
  }

  <a
    class="brand"
    [routerLink]="auth.isAuthenticated() ? '/lists' : '/login'"
    aria-label="Listify Startseite"
  >
    <mat-icon aria-hidden="true">checklist</mat-icon>
    <span>Listify</span>
  </a>

  <span class="spacer"></span>

  @if (auth.isAuthenticated()) {
    <span
      class="connection-status"
      [class.offline]="!onlineStatus.online()"
      [title]="onlineStatus.online() ? 'Online' : 'Offline'"
    >
      <mat-icon aria-hidden="true">
        {{ onlineStatus.online() ? 'cloud_done' : 'cloud_off' }}
      </mat-icon>
      @if (offlineSync.pendingCount() > 0) {
        <span>{{ offlineSync.pendingCount() }}</span>
      }
    </span>
    <span class="toolbar-user">{{ auth.user()?.name || auth.user()?.email }}</span>
  } @else {
    <a mat-button routerLink="/login" routerLinkActive="active-link" ariaCurrentWhenActive="page">
      <mat-icon aria-hidden="true">login</mat-icon>
      Login
    </a>
    <a
      mat-flat-button
      routerLink="/register"
      routerLinkActive="active-link"
      ariaCurrentWhenActive="page"
    >
      <mat-icon aria-hidden="true">person_add</mat-icon>
      Registrieren
    </a>
  }
</mat-toolbar>

@if (auth.isAuthenticated()) {
  <mat-sidenav-container class="shell">
    <mat-sidenav
      class="sidebar"
      [mode]="isCompact() ? 'over' : 'side'"
      [opened]="!isCompact() || sidebarOpened()"
      fixedInViewport
      [fixedTopGap]="isCompact() ? 56 : 64"
    >
      <nav aria-label="Hauptnavigation">
        <mat-nav-list>
          <a
            mat-list-item
            routerLink="/templates"
            routerLinkActive="active-nav-link"
            ariaCurrentWhenActive="page"
            (click)="closeSidebarOnCompact()"
          >
            <mat-icon matListItemIcon aria-hidden="true">dashboard_customize</mat-icon>
            <span matListItemTitle>Templates</span>
          </a>
          <a
            mat-list-item
            routerLink="/lists"
            routerLinkActive="active-nav-link"
            ariaCurrentWhenActive="page"
            (click)="closeSidebarOnCompact()"
          >
            <mat-icon matListItemIcon aria-hidden="true">format_list_bulleted</mat-icon>
            <span matListItemTitle>Listen</span>
          </a>
          <a
            mat-list-item
            routerLink="/account"
            routerLinkActive="active-nav-link"
            ariaCurrentWhenActive="page"
            (click)="closeSidebarOnCompact()"
          >
            <mat-icon matListItemIcon aria-hidden="true">account_circle</mat-icon>
            <span matListItemTitle>Account</span>
          </a>
          <a
            mat-list-item
            routerLink="/assistant/logs"
            routerLinkActive="active-nav-link"
            ariaCurrentWhenActive="page"
            (click)="closeSidebarOnCompact()"
          >
            <mat-icon matListItemIcon aria-hidden="true">manage_search</mat-icon>
            <span matListItemTitle>Assistant Logs</span>
          </a>
        </mat-nav-list>
      </nav>
    </mat-sidenav>

    <mat-sidenav-content class="shell-content">
      <div class="shell-workspace">
        <main class="app-main">
          <router-outlet />
        </main>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

  <app-assistant-chat />

  <nav class="bottom-nav" aria-label="Mobile Hauptnavigation">
    <a
      class="bottom-nav-link"
      routerLink="/templates"
      routerLinkActive="active-bottom-link"
      ariaCurrentWhenActive="page"
    >
      <mat-icon aria-hidden="true">dashboard_customize</mat-icon>
      <span>Templates</span>
    </a>
    <a
      class="bottom-nav-link"
      routerLink="/lists"
      routerLinkActive="active-bottom-link"
      ariaCurrentWhenActive="page"
    >
      <mat-icon aria-hidden="true">format_list_bulleted</mat-icon>
      <span>Listen</span>
    </a>
    <a
      class="bottom-nav-link"
      routerLink="/account"
      routerLinkActive="active-bottom-link"
      ariaCurrentWhenActive="page"
    >
      <mat-icon aria-hidden="true">account_circle</mat-icon>
      <span>Account</span>
    </a>
  </nav>

  <app-onboarding-overlay />
} @else {
  <main class="app-main auth-main">
    <router-outlet />
  </main>
}