73 lines
2.5 KiB
Svelte
73 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
let { orgName = 'FosterFlow', logoUrl = '' }: {
|
|
orgName?: string;
|
|
logoUrl?: string;
|
|
} = $props();
|
|
|
|
let mobileOpen = $state(false);
|
|
|
|
const navItems = [
|
|
{ href: '/pets', label: 'Our Pets' },
|
|
{ href: '/about', label: 'About' },
|
|
{ href: '/events', label: 'Events' },
|
|
{ href: '/happy-tails', label: 'Happy Tails' },
|
|
{ href: '/how-to-help', label: 'How to Help', children: [
|
|
{ href: '/become-a-foster', label: 'Become a Foster' },
|
|
{ href: '/volunteer', label: 'Volunteer' },
|
|
{ href: '/donate', label: 'Donate' },
|
|
{ href: '/sponsors', label: 'Sponsors' }
|
|
]},
|
|
{ href: '/contact', label: 'Contact' }
|
|
];
|
|
</script>
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<a href="/" class="flex items-center gap-2">
|
|
{#if logoUrl}
|
|
<img src={logoUrl} alt={orgName} class="h-10 w-auto" />
|
|
{:else}
|
|
<span class="text-xl font-bold text-primary">{orgName}</span>
|
|
{/if}
|
|
</a>
|
|
|
|
<nav class="hidden lg:flex items-center gap-6">
|
|
{#each navItems as item}
|
|
{#if item.children}
|
|
<div class="relative group">
|
|
<button class="text-gray-700 hover:text-primary transition">{item.label}</button>
|
|
<div class="absolute top-full left-0 hidden group-hover:block bg-white shadow-lg rounded-lg py-2 min-w-[180px]">
|
|
{#each item.children as child}
|
|
<a href={child.href} class="block px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-primary">{child.label}</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<a href={item.href} class="text-gray-700 hover:text-primary transition">{item.label}</a>
|
|
{/if}
|
|
{/each}
|
|
<a href="/donate" class="px-4 py-2 bg-accent text-white rounded-lg hover:bg-accent-dark transition font-medium">Donate</a>
|
|
</nav>
|
|
|
|
<button class="lg:hidden p-2" onclick={() => mobileOpen = !mobileOpen}>
|
|
<span class="text-2xl">{mobileOpen ? '✕' : '☰'}</span>
|
|
</button>
|
|
</div>
|
|
|
|
{#if mobileOpen}
|
|
<nav class="lg:hidden pb-4 border-t">
|
|
{#each navItems as item}
|
|
<a href={item.href} class="block py-2 text-gray-700" onclick={() => mobileOpen = false}>{item.label}</a>
|
|
{#if item.children}
|
|
{#each item.children as child}
|
|
<a href={child.href} class="block py-2 pl-4 text-gray-500 text-sm" onclick={() => mobileOpen = false}>{child.label}</a>
|
|
{/each}
|
|
{/if}
|
|
{/each}
|
|
<a href="/donate" class="block mt-2 px-4 py-2 bg-accent text-white rounded-lg text-center font-medium">Donate</a>
|
|
</nav>
|
|
{/if}
|
|
</div>
|
|
</header>
|