81 lines
2.1 KiB
Markdown
81 lines
2.1 KiB
Markdown
# Shared Layouts
|
|
|
|
## App Shell
|
|
|
|
Source: `src/app/core/layout/shell/`
|
|
|
|
The authenticated team workspace has a green Material toolbar with an optional team-switcher menu, a scrolling content area, and a persistent four-item mobile bottom navigation.
|
|
|
|
```html
|
|
<mat-toolbar class="shell-header">
|
|
@if (myTeams().length > 1) {
|
|
<button mat-button [matMenuTriggerFor]="teamMenu" class="shell-team-switcher">
|
|
<span>{{ currentTeam()?.name ?? 'TeamWallet' }}</span>
|
|
<mat-icon>arrow_drop_down</mat-icon>
|
|
</button>
|
|
<mat-menu #teamMenu="matMenu">
|
|
@for (team of myTeams(); track team.id) {
|
|
<button mat-menu-item (click)="switchTeam(team.id)">{{ team.name }}</button>
|
|
}
|
|
</mat-menu>
|
|
} @else {
|
|
<span>{{ currentTeam()?.name ?? 'TeamWallet' }}</span>
|
|
}
|
|
</mat-toolbar>
|
|
|
|
<main class="shell-content"><router-outlet /></main>
|
|
|
|
<nav class="shell-bottom-nav">
|
|
<a routerLink="overview" routerLinkActive="active" class="shell-bottom-nav__item"
|
|
><mat-icon>account_balance_wallet</mat-icon><span>Übersicht</span></a
|
|
>
|
|
<a routerLink="members" routerLinkActive="active" class="shell-bottom-nav__item"
|
|
><mat-icon>groups</mat-icon><span>Mitglieder</span></a
|
|
>
|
|
<a routerLink="cashbox" routerLinkActive="active" class="shell-bottom-nav__item"
|
|
><mat-icon>payments</mat-icon><span>Kasse</span></a
|
|
>
|
|
<a routerLink="more" routerLinkActive="active" class="shell-bottom-nav__item"
|
|
><mat-icon>more_horiz</mat-icon><span>Mehr</span></a
|
|
>
|
|
</nav>
|
|
```
|
|
|
|
```scss
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100dvh;
|
|
}
|
|
.shell-header {
|
|
background-color: var(--mat-sys-primary);
|
|
color: var(--mat-sys-on-primary);
|
|
}
|
|
.shell-team-switcher {
|
|
color: var(--mat-sys-on-primary);
|
|
}
|
|
.shell-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.shell-bottom-nav {
|
|
display: flex;
|
|
border-top: 1px solid var(--mat-sys-outline-variant);
|
|
background: var(--mat-sys-surface);
|
|
}
|
|
.shell-bottom-nav__item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.15rem;
|
|
padding: 0.5rem 0;
|
|
color: var(--mat-sys-on-surface-variant);
|
|
text-decoration: none;
|
|
font-size: 0.75rem;
|
|
}
|
|
.shell-bottom-nav__item.active {
|
|
color: var(--mat-sys-primary);
|
|
}
|
|
```
|