refactor: migration to skeleton v2

src/lib/components/Header.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
-	import { AppBar, LightSwitch, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
+	import { AppBar, LightSwitch, ProgressBar } from '@skeletonlabs/skeleton';
+	import { getDrawerStore, type DrawerSettings } from '@skeletonlabs/skeleton';
 	import GitHub from './icons/GitHub.svelte';
 	import Hamburger from './icons/Hamburger.svelte';
 	import LinkedIn from './icons/LinkedIn.svelte';
 	import routes from '$lib/routes';
 	import { page } from '$app/stores';
-	$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
+	const drawerStore = getDrawerStore();
 	export let progress: number;
 
-	function drawerOpen(): void {
-		drawerStore.open();
+	$: classesActive = (href: string) => (href === $page.url.pathname ? 'underline' : '');
+
+	function trigger(position: 'right'): void {
+		const s: DrawerSettings = { id: 'navigation', position };
+		drawerStore.open(s);
 	}
 </script>
 
@@ -59,7 +63,9 @@
 		<button
 			aria-label="Toggle navigation menu"
 			class="btn-icon btn-icon-sm hover:variant-soft-primary md:hidden"
-			on:click={drawerOpen}
+			on:click={() => {
+				trigger('right');
+			}}
 		>
 			<Hamburger />
 		</button>

src/lib/components/Navigation.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import type { Route } from '$lib/routes';
-	import { drawerStore } from '@skeletonlabs/skeleton';
+	import { getDrawerStore } from '@skeletonlabs/skeleton';
+	const drawerStore = getDrawerStore();
+
 	$: classesActive = (href: string) =>
-		href === $page.url.pathname ? '!bg-primary-500 text-indigo-100' : '';
+		href === $page.url.pathname ? '!bg-secondary-500 text-indigo-100' : '';
 
 	export let routes: Route[];
-
-	function drawerClose(): void {
-		drawerStore.close();
-	}
 </script>
 
 <nav class="list-nav">
 	<ul>
 		{#each routes as route}
 			<li class="mb-2">
-				<a class={classesActive(route.url)} href={route.url} on:click={drawerClose}>
-					<span class="badge bg-primary-500"
+				<a
+					class={classesActive(route.url)}
+					href={route.url}
+					on:click={() => {
+						drawerStore.close();
+					}}
+				>
+					<span class="badge bg-secondary-500"
 						><svg
 							xmlns="http://www.w3.org/2000/svg"
 							width="24"
@@ -33,7 +37,7 @@
 					>
 					<span class="flex-auto">{route.label}</span>
 				</a>
-			</li>{/each}
-		<!-- ... -->
+			</li>
+		{/each}
 	</ul>
 </nav>