Initial

listify-client/src/app/app.html

@@ -0,0 +1,130 @@
+<mat-toolbar class="app-toolbar">
+  @if (auth.isAuthenticated()) {
+    <button
+      mat-icon-button
+      type="button"
+      class="menu-button"
+      aria-label="Menue oeffnen"
+      (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="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>
+        </mat-nav-list>
+      </nav>
+    </mat-sidenav>
+
+    <mat-sidenav-content class="shell-content">
+      <main class="app-main">
+        <router-outlet />
+      </main>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+
+  <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>
+} @else {
+  <main class="app-main auth-main">
+    <router-outlet />
+  </main>
+}