antragstracker/frontend/src/routes/+layout.svelte

<script lang="ts">
	import '../app.css';
	import { onMount } from 'svelte';
	import { filters, fraktionenList, PERIODEN, togglePeriode, togglePartei, clearFilters, hasActiveFilters, type Fraktion } from '$lib/filters.svelte';

	let { children } = $props();
	let menuOpen = $state(false);

	const API_BASE = typeof window !== 'undefined'
		? (window.location.port === '5173'
			? `http://${window.location.hostname}:8099/api`
			: '/api')
		: '/api';

	onMount(async () => {
		if (fraktionenList.items.length === 0) {
			try {
				const res = await fetch(`${API_BASE}/fraktionen`);
				if (res.ok) {
					fraktionenList.items = await res.json();
				}
			} catch (e) {
				console.error('Fraktionen laden fehlgeschlagen:', e);
			}
		}
	});
</script>

<div class="min-h-screen bg-gray-50">
	<!-- Navigation -->
	<nav class="bg-white border-b border-gray-200 shadow-sm">
		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
			<div class="flex justify-between h-16">
				<div class="flex items-center">
					<a href="/" class="text-xl font-bold text-gray-900 shrink-0">
						Antragstracker <span class="text-green-600">Hagen</span>
					</a>
					<div class="hidden sm:flex sm:ml-8 space-x-4">
						<a href="/" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
						<a href="/explorer" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Explorer</a>
						<a href="/ketten" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Ketten</a>
						<a href="/vorlagen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Vorlagen</a>
						<a href="/abstimmungen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Abstimmungen</a>
						<a href="/karte" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Karte</a>
						<a href="/fristen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Fristen</a>
						<a href="/fraktionen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Fraktionen</a>
						<a href="/anleitung" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Anleitung</a>
					</div>
				</div>
				<!-- Hamburger Button -->
				<div class="flex items-center sm:hidden">
					<button
						onclick={() => menuOpen = !menuOpen}
						class="inline-flex items-center justify-center p-3 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500"
						aria-expanded={menuOpen}
						aria-label="Hauptmenü"
					>
						{#if menuOpen}
							<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
							</svg>
						{:else}
							<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
							</svg>
						{/if}
					</button>
				</div>
			</div>
		</div>

		<!-- Mobile Menu -->
		{#if menuOpen}
			<div class="sm:hidden border-t border-gray-200 bg-white">
				<div class="px-2 pt-2 pb-3 space-y-1">
					<a href="/" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Dashboard</a>
					<a href="/explorer" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Explorer</a>
					<a href="/ketten" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Ketten</a>
					<a href="/vorlagen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Vorlagen</a>
					<a href="/abstimmungen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Abstimmungen</a>
					<a href="/karte" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Karte</a>
					<a href="/fristen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Fristen</a>
					<a href="/fraktionen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Fraktionen</a>
					<a href="/anleitung" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Anleitung</a>
				</div>
			</div>
		{/if}
	</nav>

	<!-- Global Filter Bar -->
	<div class="sticky top-0 z-40 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
			<div class="flex flex-col sm:flex-row gap-2.5 sm:items-center">
				<!-- Ratsperioden -->
				<div class="flex items-center gap-2 flex-wrap">
					<span class="text-xs font-medium text-gray-500 uppercase shrink-0">Periode</span>
					<div class="flex flex-wrap gap-1">
						{#each PERIODEN as p}
							<button onclick={() => togglePeriode(p)}
								class="px-2 py-1 rounded-md text-xs font-medium transition-all
									{filters.perioden.includes(p)
										? 'bg-green-600 text-white shadow-sm'
										: 'bg-gray-100 text-gray-600 hover:bg-gray-200'}">
								{p}
							</button>
						{/each}
					</div>
				</div>

				<!-- Separator -->
				<div class="hidden sm:block w-px h-6 bg-gray-300"></div>

				<!-- Parteien -->
				<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
					<span class="text-xs font-medium text-gray-500 uppercase shrink-0">Partei</span>
					<div class="flex flex-wrap gap-1">
						{#each fraktionenList.items as f}
							<button onclick={() => togglePartei(f.kuerzel)}
								class="px-2 py-1 rounded-md text-xs font-medium transition-all border"
								style={filters.parteien.includes(f.kuerzel)
									? `background-color: ${f.farbe || '#6b7280'}; color: white; border-color: ${f.farbe || '#6b7280'};`
									: `background-color: white; color: ${f.farbe || '#6b7280'}; border-color: ${f.farbe || '#6b7280'}40;`}>
								{f.kuerzel}
							</button>
						{/each}
					</div>
				</div>

				<!-- Reset -->
				{#if hasActiveFilters()}
					<button onclick={clearFilters}
						class="text-xs text-gray-500 hover:text-gray-700 border border-gray-300 rounded-md px-2.5 py-1 hover:bg-gray-50 whitespace-nowrap shrink-0 transition-colors">
						✕ Reset
					</button>
				{/if}
			</div>
		</div>
	</div>

	<!-- Content -->
	<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
		{@render children()}
	</main>
</div>