# 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);
}
```