cards/apps/web/src/lib/components/Header.svelte

<script lang="ts">
	import { page } from '$app/state';
	import { goto } from '$app/navigation';
	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
	import { i18n, t } from '$lib/i18n/index.svelte.ts';
	import { PillTabGroup } from '@mana/shared-ui-2';

	const langOptions = [
		{ id: 'de', label: 'DE', title: 'Deutsch' },
		{ id: 'en', label: 'EN', title: 'English' },
	];

	const navOptions = $derived([
		{ id: 'decks', label: t('nav.decks') },
		{ id: 'explore', label: t('nav.explore') },
		{ id: 'import', label: t('nav.import') },
		{ id: 'stats', label: t('nav.stats') },
	]);

	const activeNav = $derived.by(() => {
		const path = page.url.pathname;
		if (path.startsWith('/decks') || path.startsWith('/study')) return 'decks';
		if (
			path.startsWith('/explore') ||
			path.startsWith('/d/') ||
			path.startsWith('/u/') ||
			path.startsWith('/me/')
		) return 'explore';
		if (path.startsWith('/import')) return 'import';
		if (path.startsWith('/stats')) return 'stats';
		return '';
	});

	const userInitial = $derived(
		devUser.user?.name?.charAt(0).toUpperCase() ??
		devUser.user?.email?.charAt(0).toUpperCase() ??
		'?'
	);

	function navTo(id: string) {
		goto('/' + id);
	}
</script>

<div class="bottom-bar" role="navigation" aria-label={t('common.main_nav')}>
	<!-- Logo -->
	<a href="/" class="logo-badge" aria-label={t('app.name')}>C</a>

	<div class="divider" aria-hidden="true"></div>

	<!-- Hauptnavigation -->
	<PillTabGroup options={navOptions} value={activeNav} onChange={navTo} />

	<div class="divider" aria-hidden="true"></div>

	<!-- Sprache -->
	<PillTabGroup
		options={langOptions}
		value={i18n.current}
		onChange={(id: string) => i18n.set(id as 'de' | 'en')}
		sectionLabel={t('common.language_switcher')}
	/>

	<!-- Account -->
	{#if devUser.id}
		<a
			href="/account"
			class="account-badge"
			title={devUser.user?.email ?? devUser.id}
			aria-label={devUser.user?.email ?? devUser.id}
		>
			{userInitial}
		</a>
	{:else}
		<a href="/" class="login-btn">Login</a>
	{/if}
</div>

<style>
	.bottom-bar {
		position: fixed;
		bottom: 1.25rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 50;
		display: flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.375rem 0.625rem;
		background: hsl(var(--color-surface) / 0.88);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border: 1px solid hsl(var(--color-border));
		border-radius: 9999px;
		box-shadow:
			0 8px 32px hsl(var(--color-foreground) / 0.12),
			0 2px 8px hsl(var(--color-foreground) / 0.08);
		white-space: nowrap;
	}

	.divider {
		width: 1px;
		height: 1.25rem;
		background: hsl(var(--color-border));
		flex-shrink: 0;
		margin: 0 0.125rem;
	}

	.logo-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 0.375rem;
		background: hsl(var(--color-primary));
		color: hsl(var(--color-primary-foreground));
		font-size: 0.8125rem;
		font-weight: 700;
		text-decoration: none;
		flex-shrink: 0;
	}

	.account-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 50%;
		background: hsl(var(--color-primary) / 0.12);
		color: hsl(var(--color-primary));
		font-size: 0.6875rem;
		font-weight: 700;
		text-decoration: none;
		flex-shrink: 0;
		margin-left: 0.125rem;
	}

	.account-badge:hover {
		background: hsl(var(--color-primary) / 0.2);
	}

	.login-btn {
		padding: 0.25rem 0.75rem;
		border-radius: 9999px;
		background: hsl(var(--color-primary));
		color: hsl(var(--color-primary-foreground));
		font-size: 0.8125rem;
		font-weight: 500;
		text-decoration: none;
		flex-shrink: 0;
	}
</style>