Marcel Raddatz
5c066d33ef
Renders emoji icons in MobileTabBar (stacked above label), TabletNavBar (inline), and DesktopSidebar (16px, 20px column). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
24 lines
777 B
Svelte
24 lines
777 B
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { mobileNavItems, isActiveRoute } 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 = isActiveRoute(item.href, $page.url.pathname)}
|
|
<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'
|
|
: ''}"
|
|
>
|
|
<span class="text-[16px]">{item.icon}</span>
|
|
{item.label}
|
|
</a>
|
|
{/each}
|
|
</nav>
|