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

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

src/routes/weather/14-day/+layout.ts

@@ -4,9 +4,8 @@ import { storedLocation } from '$lib/stores/settings';
 
 import type { LayoutLoad } from './$types';
 
-const location = get(storedLocation);
-
 export const load: LayoutLoad = async () => {
+	const location = get(storedLocation);
 	return {
 		heroTitle: `14 Day Weather ${location.name}`,
 		heroDescription: location.admin1 ?? '' + ' ' + location.country

src/routes/weather/14-day/+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/14-day/' + locationRoute);
+}) satisfies PageLoad;

src/routes/weather/14-day/[location]/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import { get } from 'svelte/store';
 
-	import { storedLocation } from '$lib/stores/settings';
+	import { type GeoLocation, storedLocation } from '$lib/stores/settings';
 
 	import {
 		buildAverageSeries,
@@ -24,7 +23,7 @@
 		fetchEnsembleForecast
 	} from '$lib/services/weather';
 
-	import { defaultParameters } from '../options';
+	import { defaultParameters } from '../../options';
 
 	import type * as echarts from 'echarts';
 
@@ -40,11 +39,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'],
 		models: ['gfs_seamless']
@@ -87,14 +87,16 @@
 
 		if (!mounted || !hourlyVars?.length || !modelList?.length) return;
 
+		const loc = location;
+
 		const loadData = async () => {
 			loading = true;
 			chartInstances = [];
 			chartComponents = [];
 
 			const result: EnsembleForecastResult = await fetchEnsembleForecast({
-				latitude: location.latitude!,
-				longitude: location.longitude!,
+				latitude: loc.latitude!,
+				longitude: loc.longitude!,
 				hourlyVariables: hourlyVars,
 				models: modelList,
 				forecast_days: 14,

src/routes/weather/14-day/[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/14-day/',
+		event
+	});
+
+	return { location };
+};