feat: move nav bar to the side (#6)

Co-authored-by: terraputix <terraputix@mailbox.org>
Reviewed-on: useweb/ombrella#6

src/routes/weather/compare/+layout.ts

@@ -1,14 +0,0 @@
-import { get } from 'svelte/store';
-
-import { storedLocation } from '$lib/stores/settings';
-
-import type { LayoutLoad } from './$types';
-
-const location = get(storedLocation);
-
-export const load: LayoutLoad = async () => {
-	return {
-		heroTitle: `Model Compare ${location.name}`,
-		heroDescription: location.admin1 ?? '' + ' ' + location.country
-	};
-};

src/routes/weather/compare/+page.ts

@@ -0,0 +1,15 @@
+import { get } from 'svelte/store';
+
+import { redirect } from '@sveltejs/kit';
+
+import { storedLocation } from '$lib/stores/settings';
+
+import { buildLocationRoute } from '$lib/utils/location';
+
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	const location = get(storedLocation);
+	const locationRoute = buildLocationRoute(location);
+	throw redirect(303, '/weather/compare/' + locationRoute);
+}) satisfies PageLoad;

src/routes/weather/compare/[location]/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import { get } from 'svelte/store';
 	import { fade } from 'svelte/transition';
 
-	import { storedLocation } from '$lib/stores/settings';
+	import { type GeoLocation, storedLocation } from '$lib/stores/settings';
 
 	import {
 		buildAverageSeries,
@@ -28,8 +27,8 @@
 		fetchModelComparison
 	} from '$lib/services/weather';
 
-	import { hourly, models as modelsFlat } from '../options';
-	import { defaultParameters } from '../options';
+	import { hourly, models as modelsFlat } from '../../options';
+	import { defaultParameters } from '../../options';
 
 	import type * as echarts from 'echarts';
 
@@ -47,11 +46,12 @@
 	let mounted = $state(false);
 	let loading = $state(true);
 
-	const location = get(storedLocation);
+	let location = $state<GeoLocation>($storedLocation);
+	storedLocation.subscribe((value) => {
+		location = value;
+	});
 
 	let params = $state({
-		latitude: [52.52],
-		longitude: [13.41],
 		...defaultParameters,
 		hourly: ['temperature_2m', 'rain', 'relative_humidity_2m'],
 		models: [
@@ -101,14 +101,16 @@
 
 		if (!mounted || !hourlyVars?.length || !modelList?.length) return;
 
+		const loc = location;
+
 		const loadData = async () => {
 			loading = true;
 			chartInstances = [];
 			chartComponents = [];
 
 			const result: ModelCompareResult = await fetchModelComparison({
-				latitude: location.latitude!,
-				longitude: location.longitude!,
+				latitude: loc.latitude!,
+				longitude: loc.longitude!,
 				hourlyVariables: hourlyVars,
 				models: modelList,
 				temperature_unit: params.temperature_unit as 'celsius' | 'fahrenheit',

src/routes/weather/compare/[location]/+page.ts

@@ -0,0 +1,13 @@
+import { resolveLocationFromRoute } from '$lib/utils/location';
+
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async (event) => {
+	const location = await resolveLocationFromRoute({
+		urlLocation: event.params.location,
+		routePrefix: '/weather/compare/',
+		event
+	});
+
+	return { location };
+};