refactor: re-implment navbar and logo

src/lib/components/Header.svelte

@@ -4,6 +4,7 @@
 	import GitHub from './icons/GitHub.svelte';
 	import Hamburger from './icons/Hamburger.svelte';
 	import LinkedIn from './icons/LinkedIn.svelte';
+	import logo from '$lib/assets/logo.svg';
 	import routes from '$lib/routes';
 	import { page } from '$app/stores';
 	const drawerStore = getDrawerStore();
@@ -20,23 +21,24 @@
 <AppBar background="">
 	<svelte:fragment slot="lead">
 		<a href="/" class="md:ml-4 ml-1">
-			<enhanced:img width="212" height="32" src="./logo@3x.png" alt="hellob.art logo" />
+			<img width="212" height="32" src={logo} alt="hellob.art logo" />
 		</a>
 	</svelte:fragment>
 
 	<nav class="hidden md:block">
 		<ul class="flex">
-			{#each routes as route}
+			{#each routes as { url, label }}
 				<li class="mx-2">
 					<a
 						class={`${classesActive(
-							route.url
+							url
 						)} decoration-indigo-500 hover:underline hover:decoration-indigo-300`}
-						href={route.url}
+						href={url}
 					>
-						<span class="flex-auto">{route.label}</span>
+						<span class="flex-auto">{label}</span>
 					</a>
-				</li>{/each}
+				</li>
+			{/each}
 		</ul>
 	</nav>
 

src/lib/components/Navigation.svelte

@@ -4,24 +4,30 @@
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
 	const drawerStore = getDrawerStore();
 
-	$: classesActive = (href: string) =>
-		href === $page.url.pathname ? '!bg-secondary-500 text-indigo-100' : '';
+	$: classesActive = (href: string) => (href === $page.url.pathname ? '!text-primary-700' : '');
 
 	export let routes: Route[];
 </script>
 
 <nav class="list-nav">
+	<div class="flex justify-end pb-2">
+		<button
+			class="button"
+			on:click={() => {
+				drawerStore.close();
+			}}>✕</button
+		>
+	</div>
 	<ul>
 		{#each routes as route}
-			<li class="mb-2">
+			<li class="mb-2 flex justify-end">
 				<a
-					class={classesActive(route.url)}
 					href={route.url}
 					on:click={() => {
 						drawerStore.close();
 					}}
 				>
-					<span class="badge bg-secondary-500"
+					<span class="badge"
 						><svg
 							xmlns="http://www.w3.org/2000/svg"
 							width="24"
@@ -32,10 +38,10 @@
 							stroke-width="2"
 							stroke-linecap="round"
 							stroke-linejoin="round"
-							class="lucide lucide-chevron-righ text-white"><path d="m9 18 6-6-6-6" /></svg
+							class="lucide lucide-chevron-right text-white"><path d="m9 18 6-6-6-6" /></svg
 						></span
 					>
-					<span class="flex-auto">{route.label}</span>
+					<span class="flex-auto {classesActive(route.url)} text-white">{route.label}</span>
 				</a>
 			</li>
 		{/each}