<script lang="ts">
	import { page } from '$app/stores';
	import { mobileNavItems } from './nav';
</script>

<nav
	aria-label="Hauptnavigation"
	class="fixed bottom-0 w-full flex justify-around bg-white border-t pb-[env(safe-area-inset-bottom,20px)] md:hidden"
>
	{#each mobileNavItems as item (item.href)}
		{@const active = $page.url.pathname.startsWith(item.href)}
		<a
			href={item.href}
			aria-current={active ? 'page' : undefined}
			class="flex flex-col items-center gap-1 py-2 px-3 rounded-[var(--radius-md)] text-[10px] font-[var(--font-sans)] min-h-[44px] min-w-[44px] {active
				? 'bg-[var(--green-tint)] text-[var(--green-dark)] font-medium'
				: ''}"
		>
			{item.label}
		</a>
	{/each}
</nav>
