src/lib/components/TabBar.svelte

<script lang="ts">
	import { page } from '$app/state';
	import type { PublicUser } from '$lib/domain/types';

	let { user }: { user: PublicUser } = $props();

	const tabs = $derived([
		{ href: '/', label: 'Expenses', icon: '🧾' },
		{ href: '/balances', label: 'Balances', icon: '⚖️' },
		{ href: '/expenses/new', label: 'Add', icon: '➕' },
		...(user.role === 'admin' ? [{ href: '/admin', label: 'Admin', icon: '🛠️' }] : []),
		{ href: '/me', label: 'Me', icon: '👤' }
	]);

	const isActive = (href: string) => {
		const path = page.url.pathname;
		if (href === '/') {
			return (
				path === '/' ||
				(path.startsWith('/expenses/') && path !== '/expenses/new') ||
				path.startsWith('/settlements/')
			);
		}
		if (href === '/expenses/new') return path === '/expenses/new';
		return path.startsWith(href);
	};
</script>

<nav
	aria-label="Primary"
	class="fixed inset-x-0 bottom-0 z-10 border-t border-gray-200 bg-white pb-[env(safe-area-inset-bottom)]"
>
	<ul class="mx-auto flex max-w-lg justify-around">
		{#each tabs as tab (tab.href)}
			<li class="flex-1">
				<a
					href={tab.href}
					class="flex flex-col items-center py-2 text-xs {isActive(tab.href)
						? 'font-semibold text-green-700'
						: 'text-gray-500'}"
					aria-current={isActive(tab.href) ? 'page' : undefined}
				>
					<span class="text-lg" aria-hidden="true">{tab.icon}</span>
					{tab.label}
				</a>
			</li>
		{/each}
	</ul>
</nav>