Release 0.2.0
This commit is contained in:
hnzio committed
1 parent
7a49e66c37
commit
08e8875cb5
38 files changed
+2645
-93
No files matched your search
+75
-48
@@ -5,7 +5,7 @@
|
||||
import NavIcon from '#lib/components/NavIcon.svelte';
|
||||
import ThemeToggle from '#lib/components/ThemeToggle.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
let { children, data } = $props();
|
||||
const primaryNavigation = [
|
||||
{ href: '/eingang', label: 'Eingang', icon: 'inbox' },
|
||||
{ href: '/fundus', label: 'Fundus', icon: 'library' },
|
||||
@@ -13,7 +13,9 @@
|
||||
{ href: '/archiv', label: 'Archiv', icon: 'archive' }
|
||||
] as const;
|
||||
const administration = { href: '/verwaltung', label: 'Verwaltung', icon: 'settings' } as const;
|
||||
const mobileNavigation = [...primaryNavigation, administration];
|
||||
const mobileNavigation = $derived(
|
||||
data.user?.role === 'barkeeper' ? [...primaryNavigation, administration] : primaryNavigation
|
||||
);
|
||||
|
||||
function isActive(href: string) {
|
||||
return (
|
||||
@@ -29,15 +31,66 @@
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<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>
|
||||
{#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)}
|
||||
<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)}
|
||||
@@ -48,42 +101,16 @@
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</header>
|
||||
<main class="auth-main">{@render children()}</main>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in new issue
Block a user