Spaces:
Sleeping
Sleeping
File size: 1,440 Bytes
59d41c0 b11153a 59d41c0 b11153a 59d41c0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <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>
|