messages/en.json

@@ -1,6 +1,9 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"nav_greeting": "Hello {name}!",
+	"nav_menu_sms": "SMS",
+	"nav_menu_settings": "Settings",
+	"nav_menu_logout": "Logout",
 	"login_tab_login": "Login",
 	"login_tab_register": "Register",
 	"login_label_email": "Email",

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

src/routes/app/+layout.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/Actions';
 	import { Navbar } from '$lib/components/Navigation';
-	import type { User } from '@prisma/client';
+	import { messages } from '$lib/i18n';
+	import 'clerk-sveltekit/client';
+	import SignOutButton from 'clerk-sveltekit/client/SignOutButton.svelte';
+	import { LogOut, MessageCircleMore } from 'lucide-svelte';
 	import type { Snippet } from 'svelte';
 	import { onMount } from 'svelte';
-	import 'clerk-sveltekit/client';
+	import type { PageData } from './$types';
 
 	type Props = {
 		children: Snippet;
-		data: {
+		data: PageData;
-			user: Omit<User, 'password'>;
-		};
 	};
 
 	let { children, data }: Props = $props();
@@ -42,7 +45,52 @@
 			}
 		}
 	});
+
+	let message = $derived(messages.nav_greeting({ name: data.user.name }));
 </script>
 
-<Navbar title="Svelte" username={data.user.name} />
+{#snippet userMenu()}
+	<div class="dropdown dropdown-end">
+		<div tabindex="0" role="button" class="btn btn-circle btn-primary btn-sm ring">
+			<div class="avatar placeholder online">
+				<div class="w-8 rounded-full">
+					{#if data.user.hasImage}
+						<img src={data.user.imageUrl} alt="Avatar" />
+					{:else}
+						<span>{data.user.name.at(0)}</span>
+					{/if}
+				</div>
+			</div>
+		</div>
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<ul
+			tabindex="0"
+			class="menu dropdown-content menu-lg z-[1] mt-4 w-52 rounded-box bg-base-200 p-2 text-right shadow"
+		>
+			<li>
+				<button onclick={() => goto('/app/sms')}
+					><MessageCircleMore /> {messages.nav_menu_sms()}</button
+				>
+			</li>
+			<li><SignOutButton><LogOut /> {messages.nav_menu_logout()}</SignOutButton></li>
+		</ul>
+	</div>
+{/snippet}
+
+<Navbar>
+	{#snippet start()}
+		<Button onclick={() => goto('/app')}>
+			<h2 class="prose prose-xl">Hestia</h2>
+		</Button>
+	{/snippet}
+	{#snippet center()}
+		<h1 class="prose prose-2xl">Svelte</h1>
+	{/snippet}
+	{#snippet end()}
+		<div class="flex items-center gap-3">
+			<p class="prose prose-lg">{message}</p>
+			{@render userMenu()}
+		</div>
+	{/snippet}
+</Navbar>
 {@render children()}

src/routes/app/+page.svelte

@@ -1,4 +1,2 @@
 <script lang="ts">
 </script>
-
-<a href="/app/sms" class="btn btn-ghost">SMS</a>