118 lines
3.9 KiB
Svelte
118 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import './layout.css';
|
|
import { enhance } from '$app/forms';
|
|
import { page } from '$app/state';
|
|
$: user = page.data.user;
|
|
$: isAdmin = user?.groups.some(g => g.permissions.includes("ADMIN"))
|
|
</script>
|
|
|
|
<div class="min-h-screen bg-brand-sand">
|
|
<!-- Changed background to Sand -->
|
|
|
|
<!-- Corporate Header -->
|
|
{#if !page.url.pathname.startsWith('/login')}
|
|
<header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-20">
|
|
<!-- Slightly taller header -->
|
|
|
|
<!-- Logo & Nav -->
|
|
<div class="flex">
|
|
<!-- LOGO (Extracted from their SVG) -->
|
|
<div class="flex-shrink-0 flex items-center mr-8">
|
|
<a href="/" class="flex items-center gap-2" aria-label="Familienarchiv">
|
|
<!-- SVG Code from their site -->
|
|
<svg
|
|
width="250"
|
|
height="25"
|
|
viewBox="0 0 250 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0.156128 1.01562C5.375 1.43431 9.621 4.65591 9.621 11.6669V19.8779H0.156128V10.4467H5.76852C5.76852 5.6736 3.70661 3.72129 0.156128 2.8334V1.01562Z"
|
|
fill="#B4B9FF"
|
|
></path>
|
|
<path
|
|
d="M10.5892 19.8779C15.8076 19.4592 20.0541 16.2371 20.0541 9.22655V1.01562H10.5892V10.4467H16.2012C16.2012 15.2199 14.1397 17.1722 10.5892 18.0601V19.8779Z"
|
|
fill="#B4B9FF"
|
|
></path>
|
|
|
|
<text
|
|
x="35"
|
|
y="20"
|
|
fill="#002850"
|
|
font-family="Montserrat"
|
|
font-weight="bold"
|
|
font-size="20">FAMILIENARCHIV</text
|
|
>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Nav Links (Montserrat font, Uppercase style often used in corporate) -->
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
|
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
|
|
? 'border-brand-navy text-brand-navy'
|
|
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
|
>
|
|
Dokumente
|
|
</a>
|
|
|
|
<a
|
|
href="/persons"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
|
{page.url.pathname.startsWith('/persons')
|
|
? 'border-brand-navy text-brand-navy'
|
|
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
|
>
|
|
Personen
|
|
</a>
|
|
|
|
<a
|
|
href="/conversations"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
|
{page.url.pathname.startsWith('/conversations')
|
|
? 'border-brand-navy text-brand-navy'
|
|
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
|
>
|
|
Konversationen
|
|
</a>
|
|
{#if isAdmin}
|
|
<a
|
|
href="/admin"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
|
{page.url.pathname.startsWith('/admin')
|
|
? 'border-brand-navy text-brand-navy'
|
|
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
|
>
|
|
Admin
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side -->
|
|
<div class="flex items-center">
|
|
<form action="/logout" method="POST" use:enhance>
|
|
<button
|
|
type="submit"
|
|
class="text-sm text-gray-500 hover:text-brand-navy font-bold uppercase font-sans tracking-wide px-3 py-2 transition"
|
|
>
|
|
Abmelden
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{/if}
|
|
|
|
<main class="py-6">
|
|
<slot />
|
|
</main>
|
|
</div>
|