44 lines
1.6 KiB
Svelte
44 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import NavIcon from '$lib/components/icons/NavIcon.svelte';
|
|
|
|
type NavIconName = 'accounts' | 'calendar' | 'history' | 'invoices';
|
|
type NavItem = { label: string; href: string; icon: NavIconName; color: string };
|
|
|
|
const navItems: NavItem[] = [
|
|
{ label: 'Accounts', href: '/customer/accounts', icon: 'accounts', color: 'primary' },
|
|
{ label: 'Schedule', href: '/customer/schedule', icon: 'calendar', color: 'secondary' },
|
|
{ label: 'History', href: '/customer/history', icon: 'history', color: 'accent' },
|
|
{ label: 'Invoices', href: '/customer/invoices', icon: 'invoices', color: 'accent2' }
|
|
];
|
|
|
|
function isActive(href: string): boolean {
|
|
if (href === '/customer') {
|
|
return $page.url.pathname === '/customer';
|
|
}
|
|
return $page.url.pathname.startsWith(href);
|
|
}
|
|
|
|
function getActiveColor(color: string): string {
|
|
return `text-${color}-600 dark:text-${color}-400`;
|
|
}
|
|
</script>
|
|
|
|
<nav class="pb-safe fixed inset-x-0 bottom-0 z-30 border-t border-theme bg-theme-secondary">
|
|
<div class="mx-auto flex h-16 max-w-lg items-center justify-around px-2">
|
|
{#each navItems as item (item.href)}
|
|
{@const active = isActive(item.href)}
|
|
<a
|
|
href={item.href}
|
|
class="flex flex-col items-center justify-center rounded-lg px-3 py-1.5 transition-all duration-200 {active
|
|
? getActiveColor(item.color)
|
|
: 'text-theme-muted hover:text-theme-secondary'}"
|
|
aria-current={active ? 'page' : undefined}
|
|
>
|
|
<NavIcon name={item.icon} class="h-5 w-5 sm:h-6 sm:w-6" />
|
|
<span class="mt-0.5 text-[10px] font-semibold sm:text-xs">{item.label}</span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</nav>
|