117 lines
3.6 KiB
Svelte
117 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import { resolve } from '$app/paths';
|
|
import { page } from '$app/state';
|
|
import NavIcon from '#lib/components/NavIcon.svelte';
|
|
import ThemeToggle from '#lib/components/ThemeToggle.svelte';
|
|
|
|
let { children, data } = $props();
|
|
const primaryNavigation = [
|
|
{ href: '/eingang', label: 'Eingang', icon: 'inbox' },
|
|
{ href: '/fundus', label: 'Fundus', icon: 'library' },
|
|
{ href: '/sendungen', label: 'Sendungen', icon: 'shows' },
|
|
{ href: '/archiv', label: 'Archiv', icon: 'archive' }
|
|
] as const;
|
|
const administration = { href: '/verwaltung', label: 'Verwaltung', icon: 'settings' } as const;
|
|
const mobileNavigation = $derived(
|
|
data.user?.role === 'barkeeper' ? [...primaryNavigation, administration] : primaryNavigation
|
|
);
|
|
|
|
function isActive(href: string) {
|
|
return (
|
|
page.url.pathname.startsWith(href) || (href === '/sendungen' && page.url.pathname === '/live')
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta
|
|
name="description"
|
|
content="Sendewerk organisiert redaktionelle Inhalte und heinzlive-Sendungen."
|
|
/>
|
|
</svelte:head>
|
|
|
|
{#if data.user}
|
|
<div class="app-shell">
|
|
<aside class="sidebar">
|
|
<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
|
|
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
<span>Sendewerk</span>
|
|
</a>
|
|
|
|
<nav class="main-navigation" aria-label="Hauptnavigation">
|
|
{#each primaryNavigation as item (item.href)}
|
|
<a
|
|
href={resolve(item.href)}
|
|
class:active={isActive(item.href)}
|
|
aria-current={isActive(item.href) ? 'page' : undefined}
|
|
>
|
|
<NavIcon name={item.icon} />
|
|
<span>{item.label}</span>
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
{#if data.user.role === 'barkeeper'}
|
|
<nav class="utility-navigation" aria-label="Verwaltung">
|
|
<a
|
|
href={resolve(administration.href)}
|
|
class:active={isActive(administration.href)}
|
|
aria-current={isActive(administration.href) ? 'page' : undefined}
|
|
>
|
|
<NavIcon name={administration.icon} />
|
|
<span>{administration.label}</span>
|
|
</a>
|
|
</nav>
|
|
{/if}
|
|
<div class="account-summary">
|
|
<span>{data.user.displayName}</span>
|
|
<small>{data.user.role === 'barkeeper' ? 'Barkeeper' : 'Thekencrew'}</small>
|
|
</div>
|
|
<form method="POST" action="/logout">
|
|
<button class="logout-button" type="submit">Abmelden</button>
|
|
</form>
|
|
<ThemeToggle />
|
|
</div>
|
|
</aside>
|
|
|
|
<header class="mobile-header">
|
|
<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
|
|
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
<span>Sendewerk</span>
|
|
</a>
|
|
<form method="POST" action="/logout">
|
|
<button class="mobile-logout" type="submit" aria-label="Abmelden">↗</button>
|
|
</form>
|
|
<ThemeToggle />
|
|
</header>
|
|
|
|
<main id="main-content">{@render children()}</main>
|
|
|
|
<nav class="mobile-navigation" aria-label="Hauptnavigation">
|
|
{#each mobileNavigation as item (item.href)}
|
|
<a
|
|
href={resolve(item.href)}
|
|
class:active={isActive(item.href)}
|
|
aria-current={isActive(item.href) ? 'page' : undefined}
|
|
>
|
|
<NavIcon name={item.icon} />
|
|
<span>{item.label}</span>
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
</div>
|
|
{:else}
|
|
<div class="auth-shell">
|
|
<header class="auth-header">
|
|
<a class="brand" href={resolve('/login')} aria-label="Sendewerk Anmeldung">
|
|
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
<span>Sendewerk</span>
|
|
</a>
|
|
<ThemeToggle />
|
|
</header>
|
|
<main class="auth-main">{@render children()}</main>
|
|
</div>
|
|
{/if}
|