133 lines
3.6 KiB
HTML
133 lines
3.6 KiB
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="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>
|
|
|
|
<app-onboarding-overlay />
|
|
} @else {
|
|
<main class="app-main auth-main">
|
|
<router-outlet />
|
|
</main>
|
|
}
|