.storybook/preview.css

@@ -1,4 +1,3 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import '@flaticon/flaticon-uicons/css/all/all';

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/DataInput/TextInput.svelte

@@ -1,26 +1,23 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
 	import type { Snippet } from 'svelte';
-	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
 	import { fade as fadeTransition } from 'svelte/transition';
 
 	type Props = {
 		bordered?: boolean;
 		color?: Exclude<DaisyColor, 'neutral'>;
-		disabled?: boolean;
 		error?: string | Snippet;
 		fade?: boolean;
 		start?: string | Snippet;
 		end?: string | Snippet;
 		label?: string | Snippet;
-		name: string;
-		placeholder?: string;
 		size?: DaisySize;
 		type?: Extract<
 			HTMLInputTypeAttribute,
 			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
 		>;
-	};
+	} & Omit<SvelteHTMLElements['input'], 'type'>;
 
 	let {
 		bordered = false,
@@ -35,10 +32,11 @@
 		placeholder,
 		size,
 		type = 'text',
+		...props
 	}: Props = $props();
 </script>
 
-<label class="form-control w-full">
+<label class="form-control w-full" transition:fadeTransition={{ duration: fade ? 200 : 0 }}>
 	<div class="label">
 		<span
 			class="label-text"
@@ -65,7 +63,6 @@
 		</span>
 	</div>
 	<div
-		transition:fadeTransition={{ duration: fade ? 200 : 0 }}
 		class="input flex w-full items-center gap-2"
 		class:input-bordered={bordered}
 		class:input-xs={size === 'xs'}
@@ -85,7 +82,7 @@
 		{:else}
 			{@render start?.()}
 		{/if}
-		<input {disabled} {name} {placeholder} {type} class="grow" />
+		<input {...props} {disabled} {name} {placeholder} {type} class="grow" />
 		{#if typeof end === 'string'}
 			{end}
 		{:else}

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/+layout.svelte

@@ -9,15 +9,15 @@
 </script>
 
 <div class="layout">
+	<ParaglideJS {i18n}>
 		<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
 			{@render children()}
 		</ClerkProvider>
+	</ParaglideJS>
 </div>
 
-<ParaglideJS {i18n}>
+<style>
-	<style>
 	.layout {
 		@apply h-screen w-screen bg-base-100;
 	}
-	</style>
+</style>
-</ParaglideJS>

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>