143 lines
3.7 KiB
Svelte
143 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { resolve } from '$app/paths';
|
|
|
|
const links = [
|
|
{
|
|
title: 'Current Weather',
|
|
url: '/weather/week',
|
|
description: 'Current conditions and overview',
|
|
icon: '🌡️'
|
|
},
|
|
{
|
|
title: 'Model Comparison',
|
|
url: '/weather/compare',
|
|
description: 'Compare multiple weather models',
|
|
icon: '📊'
|
|
},
|
|
{
|
|
title: '14 Day Forecast',
|
|
url: '/weather/14-day',
|
|
description: 'Extended forecast with uncertainty',
|
|
icon: '📅'
|
|
}
|
|
];
|
|
|
|
let mobileNavOpened = $state(false);
|
|
let currentPath = $derived($page.url.pathname);
|
|
|
|
const isActive = (url: string) => {
|
|
return currentPath === url || currentPath.startsWith(url + '/');
|
|
};
|
|
</script>
|
|
|
|
<nav
|
|
class="sticky top-0 z-50 border-b border-gray-200/50 bg-white/90 shadow-sm backdrop-blur-lg dark:border-gray-700/50 dark:bg-gray-900/90"
|
|
>
|
|
<div class="container mx-auto px-6">
|
|
<div class="flex h-16 items-center justify-between">
|
|
<!-- Logo -->
|
|
<div class="flex items-center space-x-3">
|
|
<div class="rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 p-2">
|
|
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<a
|
|
href={resolve('/')}
|
|
class="text-xl font-bold text-gray-900 transition-colors hover:text-blue-600 dark:text-white"
|
|
>
|
|
Open-Meteo Weather
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<div class="hidden items-center space-x-2 md:flex">
|
|
{#each links as link (link.title)}
|
|
<Button
|
|
href={link.url}
|
|
variant={isActive(link.url) ? 'default' : 'ghost'}
|
|
size="sm"
|
|
class="group relative px-4 py-2 {isActive(link.url)
|
|
? 'bg-blue-600 text-white shadow-md'
|
|
: 'hover:bg-blue-50 dark:hover:bg-blue-900/20'}"
|
|
>
|
|
<span class="mr-1">{link.icon}</span>
|
|
{link.title}
|
|
</Button>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="rounded-lg"
|
|
onclick={() => (mobileNavOpened = !mobileNavOpened)}
|
|
>
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{#if mobileNavOpened}
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
{:else}
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
{/if}
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation -->
|
|
{#if mobileNavOpened}
|
|
<div class="border-t border-gray-200 py-4 md:hidden dark:border-gray-700">
|
|
<div class="space-y-2">
|
|
{#each links as link (link.title)}
|
|
<Button
|
|
href={link.url}
|
|
variant={isActive(link.url) ? 'default' : 'ghost'}
|
|
class="w-full justify-start py-3 {isActive(link.url) ? 'bg-blue-600 text-white' : ''}"
|
|
onclick={() => (mobileNavOpened = false)}
|
|
>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-lg">{link.icon}</span>
|
|
<div class="text-left">
|
|
<div class="font-medium">{link.title}</div>
|
|
<div
|
|
class="text-xs {isActive(link.url)
|
|
? 'text-blue-100'
|
|
: 'text-gray-500 dark:text-gray-400'}"
|
|
>
|
|
{link.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
:global(.container) {
|
|
max-width: 1200px;
|
|
}
|
|
</style>
|