bastian/teamwallet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Bastian Wagner
2026-07-31 21:02:47 +02:00
commit 6bea4f766a
512 changed files with 64459 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
myteamwallet_frontend_modern/.superdesign/init/layouts.md Normal file
View File

@@ -0,0 +1,80 @@
# 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);
}
```