Files
kochwas/src/routes/admin/+layout.svelte
hsiegeln 9e471c7bf3
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m19s
refactor(nav): Pfeil-Icon im Header statt großem Zurück-Pill
Der neu eingefügte Admin-Pill war zu prominent für seinen Zweck. Raus
damit. Stattdessen zeigt der Haupt-Header auf allen Nicht-Hauptseiten
links einen ArrowLeft-Icon-Link zur Startseite — platzsparend und
konsistent über alle Sub-Seiten (Admin, Rezept, Preview, Wunschliste…).
Auf der Startseite selbst bleibt das „Kochwas"-Wortmarke stehen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-18 11:06:52 +02:00

59 lines
1.1 KiB
Svelte

<script lang="ts">
import { page } from '$app/stores';
let { children } = $props();
const items = [
{ href: '/admin/domains', label: '🌐 Domains' },
{ href: '/admin/profiles', label: '👥 Profile' },
{ href: '/admin/backup', label: '💾 Backup' }
];
</script>
<nav class="tabs">
{#each items as item (item.href)}
<a
href={item.href}
class="tab"
class:active={$page.url.pathname.startsWith(item.href)}
>
{item.label}
</a>
{/each}
</nav>
<section class="admin-body">
{@render children()}
</section>
<style>
.tabs {
display: flex;
gap: 0.25rem;
padding: 0.75rem 0 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tab {
padding: 0.6rem 0.9rem;
background: white;
border: 1px solid #e4eae7;
border-radius: 999px;
text-decoration: none;
color: #444;
font-size: 0.95rem;
white-space: nowrap;
min-height: 40px;
display: inline-flex;
align-items: center;
}
.tab.active {
background: #2b6a3d;
color: white;
border-color: #2b6a3d;
}
.admin-body {
padding: 1rem 0;
}
</style>