feat: move nav bar to the side (#6)
Co-authored-by: terraputix <terraputix@mailbox.org> Reviewed-on: useweb/ombrella#6
This commit is contained in:
terraputix
@@ -1,14 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import { createEventDispatcher, onDestroy, tick } from 'svelte';
|
||||
|
||||
import { type GeoLocation } from '$lib/stores/settings';
|
||||
|
||||
import * as Alert from '$lib/components/ui/alert';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Dialog from '$lib/components/ui/dialog';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import * as Popover from '$lib/components/ui/popover';
|
||||
|
||||
export let label: string = 'Search Locations...';
|
||||
export let label: string = 'Search location...';
|
||||
export let placeholder: string = 'Enter city name...';
|
||||
|
||||
interface ResultSet {
|
||||
@@ -18,26 +18,32 @@
|
||||
const dispatch = createEventDispatcher();
|
||||
let debounceTimeout: ReturnType<typeof setTimeout> | undefined;
|
||||
let searchQuery = '';
|
||||
let popoverOpen = false;
|
||||
let searchInputEl: HTMLInputElement | null = null;
|
||||
|
||||
onDestroy(() => {
|
||||
clearInterval(debounceTimeout);
|
||||
clearTimeout(debounceTimeout);
|
||||
});
|
||||
|
||||
let scrollY: number | undefined;
|
||||
|
||||
const closeModal = () => {
|
||||
dialogOpen = false;
|
||||
if (scrollY) {
|
||||
window.scrollTo({ top: scrollY, behavior: 'instant' });
|
||||
}
|
||||
const closePopover = () => {
|
||||
popoverOpen = false;
|
||||
};
|
||||
|
||||
const selectLocation = (location: GeoLocation) => {
|
||||
searchQuery = '';
|
||||
closeModal();
|
||||
closePopover();
|
||||
dispatch('location', location);
|
||||
};
|
||||
|
||||
async function focusInput() {
|
||||
await tick();
|
||||
searchInputEl?.focus();
|
||||
}
|
||||
|
||||
$: if (popoverOpen) {
|
||||
focusInput();
|
||||
}
|
||||
|
||||
$: results = (async () => {
|
||||
if (debounceTimeout) {
|
||||
clearTimeout(debounceTimeout);
|
||||
@@ -91,187 +97,170 @@
|
||||
|
||||
return (await result.json()) as ResultSet;
|
||||
})();
|
||||
|
||||
let dialogOpen = false;
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open={dialogOpen}>
|
||||
<Dialog.Trigger
|
||||
class="group flex h-14 w-full cursor-pointer items-center justify-start rounded-xl border-2 border-gray-200 bg-white px-6 transition-all duration-200 hover:border-blue-400 hover:shadow-md focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-700"
|
||||
onclick={(e) => {
|
||||
e.preventDefault();
|
||||
dialogOpen = !dialogOpen;
|
||||
}}
|
||||
<Popover.Root bind:open={popoverOpen}>
|
||||
<Popover.Trigger
|
||||
class="flex h-9 w-full cursor-pointer items-center gap-2 rounded-md border border-border bg-background px-3 text-[0.8125rem] text-muted-foreground transition-[border-color,box-shadow] duration-150 hover:border-primary"
|
||||
>
|
||||
<svg
|
||||
class="mr-3 h-5 w-5 text-gray-400 transition-colors group-hover:text-blue-500"
|
||||
class="h-3.5 w-3.5 shrink-0 opacity-50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.3-4.3" />
|
||||
</svg>
|
||||
<span
|
||||
class="text-gray-600 transition-colors group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</Dialog.Trigger>
|
||||
<span class="overflow-hidden text-ellipsis whitespace-nowrap">{label}</span>
|
||||
</Popover.Trigger>
|
||||
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay class="bg-black/20 backdrop-blur-sm" />
|
||||
|
||||
<Dialog.Content
|
||||
class="top-[10%] flex max-h-[calc(100vh-10%)] min-h-[500px] translate-y-0 flex-col overflow-hidden rounded-2xl border-border bg-white shadow-2xl sm:max-w-[700px] dark:bg-gray-800"
|
||||
>
|
||||
<Dialog.Header class="pb-6">
|
||||
<Dialog.Title class="text-center text-2xl font-bold">Find Your Location</Dialog.Title>
|
||||
<p class="text-center text-gray-600 dark:text-gray-300">
|
||||
Search for a city or use GPS to detect your location
|
||||
</p>
|
||||
</Dialog.Header>
|
||||
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div class="px-6">
|
||||
<div class="mb-6 flex gap-3">
|
||||
<div class="flex-1">
|
||||
<Input
|
||||
type="search"
|
||||
{placeholder}
|
||||
class="h-12 text-lg"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
aria-label="Search Location"
|
||||
bind:value={searchQuery}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="px-4"
|
||||
title="Use GPS Location"
|
||||
onclick={() => (searchQuery = 'GPS')}
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
<Popover.Content
|
||||
class="popover-dropdown w-(--bits-popover-anchor-width) min-w-[320px] p-0"
|
||||
side="bottom"
|
||||
align="start"
|
||||
sideOffset={4}
|
||||
onOpenAutoFocus={(e) => {
|
||||
e.preventDefault();
|
||||
focusInput();
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="p-3">
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1">
|
||||
<Input
|
||||
type="search"
|
||||
{placeholder}
|
||||
class="h-9"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
aria-label="Search Location"
|
||||
bind:value={searchQuery}
|
||||
bind:ref={searchInputEl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto px-6 pb-6">
|
||||
{#await results}
|
||||
<div class="flex h-32 items-center justify-center">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600"></div>
|
||||
<span class="text-gray-600 dark:text-gray-300">Searching...</span>
|
||||
</div>
|
||||
</div>
|
||||
{:then results}
|
||||
{#if results.results && results.results.length === 0}
|
||||
{#if searchQuery.length < 2}
|
||||
<Alert.Root class="border-blue-200 bg-blue-50 dark:bg-blue-900/20">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<Alert.Description class="text-blue-700 dark:text-blue-300">
|
||||
Start typing to search for locations or use GPS to detect your current position
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
{:else}
|
||||
<Alert.Root class="border-orange-200 bg-orange-50 dark:bg-orange-900/20">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
<Alert.Description class="text-orange-700 dark:text-orange-300">
|
||||
No locations found for "{searchQuery}". Try a different search term.
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/if}
|
||||
{:else if !results.results}
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Description>No locations found</Alert.Description>
|
||||
</Alert.Root>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each results.results || [] as location, i (i)}
|
||||
<button
|
||||
class="group w-full rounded-xl border border-gray-200 p-4 text-left transition-all duration-200 hover:border-blue-400 hover:bg-blue-50 dark:border-gray-600 dark:hover:bg-blue-900/20"
|
||||
onclick={() => selectLocation(location)}
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-1 items-center space-x-4">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full shadow-md"
|
||||
src="/images/country-flags/{(
|
||||
location.country_code || 'united_nations'
|
||||
).toLowerCase()}.svg"
|
||||
alt={location.country}
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<h3
|
||||
class="font-semibold text-gray-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400"
|
||||
>
|
||||
{location.name}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
{location.admin1 || ''}
|
||||
{location.country || ''}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{location.latitude.toFixed(2)}°N {location.longitude.toFixed(2)}°E
|
||||
{#if location.elevation}• {location.elevation.toFixed(0)}m{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
class="h-5 w-5 text-gray-400 group-hover:text-blue-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Description>Error: {error.message}</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/await}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="default"
|
||||
class="h-9 px-2.5"
|
||||
title="Use GPS Location"
|
||||
onclick={() => (searchQuery = 'GPS')}
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
|
||||
<div class="max-h-[min(400px,50vh)] overflow-y-auto px-3 pb-3">
|
||||
{#await results}
|
||||
<div class="flex h-20 items-center justify-center">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="h-4 w-4 animate-spin rounded-full border-b-2 border-primary"></div>
|
||||
<span class="text-sm text-muted-foreground">Searching...</span>
|
||||
</div>
|
||||
</div>
|
||||
{:then results}
|
||||
{#if results.results && results.results.length === 0}
|
||||
{#if searchQuery.length < 2}
|
||||
<div
|
||||
class="flex items-start gap-2 rounded-md bg-primary/8 p-2.5 text-muted-foreground"
|
||||
>
|
||||
<svg
|
||||
class="mt-0.5 h-3.5 w-3.5 shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-xs">
|
||||
Start typing to search or use GPS to detect your position
|
||||
</span>
|
||||
</div>
|
||||
{:else}
|
||||
<Alert.Root
|
||||
class="border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-900/20"
|
||||
>
|
||||
<Alert.Description class="text-orange-700 dark:text-orange-300">
|
||||
No locations found for "{searchQuery}". Try a different term.
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/if}
|
||||
{:else if !results.results}
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Description>No locations found</Alert.Description>
|
||||
</Alert.Root>
|
||||
{:else}
|
||||
<div class="space-y-0.5">
|
||||
{#each results.results || [] as location, i (i)}
|
||||
<button
|
||||
class="group block w-full cursor-pointer rounded-md border border-transparent bg-transparent px-2.5 py-2 transition-[background,border-color] duration-150 hover:border-border hover:bg-accent"
|
||||
onclick={() => selectLocation(location)}
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<img
|
||||
class="h-7 w-7 rounded-full"
|
||||
src="/images/country-flags/{(
|
||||
location.country_code || 'united_nations'
|
||||
).toLowerCase()}.svg"
|
||||
alt={location.country}
|
||||
/>
|
||||
<div class="flex-1 text-left">
|
||||
<div class="text-sm font-medium text-foreground">
|
||||
{location.name}
|
||||
</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{location.admin1 || ''}
|
||||
{location.country || ''}
|
||||
· {location.latitude.toFixed(2)}°N {location.longitude.toFixed(2)}°E
|
||||
{#if location.elevation}· {location.elevation.toFixed(0)}m{/if}
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
class="h-3.5 w-3.5 text-muted-foreground opacity-0 transition-opacity duration-150 group-hover:opacity-100"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Description>Error: {error.message}</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
<script lang="ts">
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import { type GeoLocation, storedLocation } from '$lib/stores/settings';
|
||||
|
||||
import { buildLocationRoute } from '$lib/utils/location';
|
||||
|
||||
import LocationSearch from '$lib/components/location/location-search.svelte';
|
||||
|
||||
interface Props {
|
||||
onMenuToggle?: () => void;
|
||||
}
|
||||
|
||||
let { onMenuToggle }: Props = $props();
|
||||
|
||||
let location = $state(get(storedLocation));
|
||||
|
||||
storedLocation.subscribe((value) => {
|
||||
location = value;
|
||||
});
|
||||
|
||||
function navigateToLocation(newLocation: GeoLocation) {
|
||||
storedLocation.set(newLocation);
|
||||
const locationRoute = buildLocationRoute(newLocation);
|
||||
const currentPath = get(page).url.pathname;
|
||||
|
||||
if (currentPath.startsWith('/weather/compare')) {
|
||||
goto(resolve('/weather/compare/[location]', { location: locationRoute }));
|
||||
} else if (currentPath.startsWith('/weather/14-day')) {
|
||||
goto(resolve('/weather/14-day/[location]', { location: locationRoute }));
|
||||
} else {
|
||||
goto(resolve('/weather/week/[location]', { location: locationRoute }));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header
|
||||
class="topbar flex h-14 shrink-0 items-center gap-3 border-b border-topbar-border bg-topbar px-3 md:px-4"
|
||||
>
|
||||
<!-- Mobile menu toggle -->
|
||||
<button
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-black/5 md:hidden dark:hover:bg-white/10"
|
||||
onclick={onMenuToggle}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Current location display -->
|
||||
{#if location}
|
||||
<div class="hidden items-center gap-2 sm:flex">
|
||||
<img
|
||||
class="h-5 w-5 rounded-full"
|
||||
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
|
||||
alt={location.country}
|
||||
/>
|
||||
<span class="text-sm font-medium text-foreground">
|
||||
{location.name}
|
||||
</span>
|
||||
{#if location.admin1 || location.country}
|
||||
<span class="text-xs text-muted-foreground">
|
||||
{#if location.admin1}{location.admin1},{/if}
|
||||
{location.country}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Spacer -->
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<!-- Location search -->
|
||||
<div class="w-full max-w-sm md:max-w-md">
|
||||
<LocationSearch
|
||||
label="Search location..."
|
||||
on:location={(event) => {
|
||||
navigateToLocation(event.detail);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.topbar {
|
||||
z-index: 40;
|
||||
}
|
||||
</style>
|
||||
@@ -2,30 +2,32 @@
|
||||
import { resolve } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
interface Props {
|
||||
collapsed?: boolean;
|
||||
onToggle?: () => void;
|
||||
onMobileClose?: () => void;
|
||||
}
|
||||
|
||||
let { collapsed = false, onToggle, onMobileClose }: Props = $props();
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: 'Current Weather',
|
||||
url: '/weather/week',
|
||||
description: 'Current conditions and overview',
|
||||
icon: '🌡️'
|
||||
title: '7-Day Forecast',
|
||||
url: '/weather/week' as const,
|
||||
icon: 'calendar'
|
||||
},
|
||||
{
|
||||
title: 'Model Comparison',
|
||||
url: '/weather/compare',
|
||||
description: 'Compare multiple weather models',
|
||||
icon: '📊'
|
||||
url: '/weather/compare' as const,
|
||||
icon: 'chart'
|
||||
},
|
||||
{
|
||||
title: '14 Day Forecast',
|
||||
url: '/weather/14-day',
|
||||
description: 'Extended forecast with uncertainty',
|
||||
icon: '📅'
|
||||
title: '14-Day Forecast',
|
||||
url: '/weather/14-day' as const,
|
||||
icon: 'extended'
|
||||
}
|
||||
];
|
||||
|
||||
let mobileNavOpened = $state(false);
|
||||
let currentPath = $derived($page.url.pathname);
|
||||
|
||||
const isActive = (url: string) => {
|
||||
@@ -33,111 +35,164 @@
|
||||
};
|
||||
</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"
|
||||
<aside
|
||||
class="flex h-full flex-col border-r border-sidebar-border bg-sidebar transition-all duration-200"
|
||||
class:w-55={!collapsed}
|
||||
class:w-14={collapsed}
|
||||
>
|
||||
<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">
|
||||
<!-- Sidebar header -->
|
||||
<div class="flex items-center border-b border-sidebar-border px-3 py-4">
|
||||
{#if !collapsed}
|
||||
<a
|
||||
href={resolve('/weather/week')}
|
||||
class="flex items-center gap-2.5 px-1"
|
||||
onclick={onMobileClose}
|
||||
>
|
||||
<div
|
||||
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground"
|
||||
>
|
||||
<svg
|
||||
class="h-4.5 w-4.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
>
|
||||
<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"
|
||||
<span class="text-sm font-semibold whitespace-nowrap text-sidebar-foreground">
|
||||
Open-Meteo
|
||||
</span>
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href={resolve('/weather/week')}
|
||||
class="mx-auto flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground"
|
||||
onclick={onMobileClose}
|
||||
aria-label="Open-Meteo Home"
|
||||
>
|
||||
<svg
|
||||
class="h-4.5 w-4.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
>
|
||||
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>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Navigation links -->
|
||||
<nav class="flex-1 space-y-1 px-2 py-3">
|
||||
{#each links as link (link.title)}
|
||||
{@const active = isActive(link.url)}
|
||||
<a
|
||||
href={resolve(link.url)}
|
||||
class="relative flex items-center rounded-md px-2.5 py-2 text-sm font-medium text-sidebar-foreground opacity-70 transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:opacity-100 {active
|
||||
? 'bg-sidebar-accent text-sidebar-primary! opacity-100! font-semibold! nav-active'
|
||||
: ''}"
|
||||
title={collapsed ? link.title : undefined}
|
||||
onclick={onMobileClose}
|
||||
>
|
||||
<div class="flex h-5 w-5 shrink-0 items-center justify-center">
|
||||
{#if link.icon === 'calendar'}
|
||||
<svg
|
||||
class="h-4.5 w-4.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.75"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
{:else if link.icon === 'chart'}
|
||||
<svg
|
||||
class="h-4.5 w-4.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.75"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
||||
/>
|
||||
</svg>
|
||||
{:else if link.icon === 'extended'}
|
||||
<svg
|
||||
class="h-4.5 w-4.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.75"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !collapsed}
|
||||
<span class="ml-2.5 whitespace-nowrap">{link.title}</span>
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<!-- Collapse toggle -->
|
||||
<div class="border-t border-sidebar-border px-2 py-3">
|
||||
<button
|
||||
class="relative flex w-full items-center rounded-md px-2.5 py-2 text-sm font-medium text-sidebar-foreground opacity-70 transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:opacity-100"
|
||||
onclick={onToggle}
|
||||
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
<div class="flex h-5 w-5 shrink-0 items-center justify-center">
|
||||
<svg
|
||||
class="h-4.5 w-4.5 transition-transform duration-200"
|
||||
class:rotate-180={!collapsed}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.75"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
{#if !collapsed}
|
||||
<span class="ml-2.5 whitespace-nowrap">Collapse</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
:global(.container) {
|
||||
max-width: 1200px;
|
||||
.nav-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 60%;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--sidebar-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import Close from './popover-close.svelte';
|
||||
import Content from './popover-content.svelte';
|
||||
import Portal from './popover-portal.svelte';
|
||||
import Trigger from './popover-trigger.svelte';
|
||||
import Root from './popover.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Trigger,
|
||||
Close,
|
||||
Portal,
|
||||
//
|
||||
Root as Popover,
|
||||
Content as PopoverContent,
|
||||
Trigger as PopoverTrigger,
|
||||
Close as PopoverClose,
|
||||
Portal as PopoverPortal
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
|
||||
</script>
|
||||
|
||||
<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
|
||||
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
|
||||
import { type WithoutChildrenOrChild, cn } from '$lib/utils/ui.js';
|
||||
|
||||
import PopoverPortal from './popover-portal.svelte';
|
||||
|
||||
import type { ComponentProps } from 'svelte';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
sideOffset = 4,
|
||||
align = 'center',
|
||||
portalProps,
|
||||
...restProps
|
||||
}: PopoverPrimitive.ContentProps & {
|
||||
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<PopoverPortal {...portalProps}>
|
||||
<PopoverPrimitive.Content
|
||||
bind:ref
|
||||
data-slot="popover-content"
|
||||
{sideOffset}
|
||||
{align}
|
||||
class={cn(
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
</PopoverPortal>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
|
||||
let { ...restProps }: PopoverPrimitive.PortalProps = $props();
|
||||
</script>
|
||||
|
||||
<PopoverPrimitive.Portal {...restProps} />
|
||||
@@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
|
||||
import { cn } from '$lib/utils/ui.js';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: PopoverPrimitive.TriggerProps = $props();
|
||||
</script>
|
||||
|
||||
<PopoverPrimitive.Trigger
|
||||
bind:ref
|
||||
data-slot="popover-trigger"
|
||||
class={cn('', className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Popover as PopoverPrimitive } from 'bits-ui';
|
||||
|
||||
let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<PopoverPrimitive.Root bind:open {...restProps} />
|
||||
Reference in New Issue
Block a user