Chore: add menu dropdown on navbar (#54)

add menu dropdown on navbar

add messages to navbar

src/lib/components/Navigation/Navbar/Navbar.stories.svelte

@@ -8,4 +8,20 @@
 	});
 </script>
 
-<Story name="Default" args={{ title: 'Storybook' }} />
+<Story name="Default">
+	<Navbar>
+		{#snippet start()}
+			<button class="btn">Home</button>
+		{/snippet}
+		{#snippet center()}
+			<h2 class="text-xl">Title</h2>
+		{/snippet}
+		{#snippet end()}
+			<div class="avatar placeholder">
+				<div class="w-8 rounded-full bg-neutral text-neutral-content">
+					<span class="text-xs">UI</span>
+				</div>
+			</div>
+		{/snippet}
+	</Navbar>
+</Story>

src/lib/components/Navigation/Navbar/Navbar.svelte

@@ -1,18 +1,11 @@
 <script lang="ts">
-	import { messages } from '$lib/i18n';
-	import SignOutButton from 'clerk-sveltekit/client/SignOutButton.svelte';
+	import type { Snippet } from 'svelte';
 
-	let { title, username }: { title: string; username: string } = $props();
-
-	let message = $derived(messages.nav_greeting({ name: username }));
+	let { start, center, end }: { start?: Snippet; center?: Snippet; end?: Snippet } = $props();
 </script>
 
 <header class="navbar justify-between bg-base-200 px-4">
-	<h2 class="prose prose-xl">Hestia</h2>
-	<h1 class="prose prose-2xl">{title}</h1>
-	<p class="prose prose-lg">{message}</p>
-	<SignOutButton />
+	<div class="navbar-start">{@render start?.()}</div>
+	<div class="navbar-center">{@render center?.()}</div>
+	<div class="navbar-end">{@render end?.()}</div>
 </header>
-
-<style>
-</style>

src/lib/server/auth/index.ts

@@ -74,6 +74,6 @@ export async function validateSession({ locals }: ServerLoadEvent) {
 	}
 
 	return {
-		user: { name: user.name },
+		user: { name: user.name, hasImage: clerkUser.hasImage, imageUrl: clerkUser.imageUrl },
 	};
 }