rename header

2026-03-04 15:16:47 +01:00
parent 8c0b80f041
commit d8d220a6a9
2 changed files with 2 additions and 2 deletions
@@ -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>