From 5131ae0bc45a5585e20e2e03854ae7e3bd0c9c37 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Tue, 3 Mar 2026 14:03:32 +0500
Subject: [PATCH] =?UTF-8?q?feat(ui):=20update=20nav=20=E2=80=94=20show=20B?=
 =?UTF-8?q?rowse=20link,=20username,=20and=20Sign=20out=20when=20logged=20?=
 =?UTF-8?q?in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/routes/+layout.svelte | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index da3c203..6e4c68e 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import '../app.css';
+	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
 
-	let { children } = $props();
+	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 </script>
 
 <svelte:head>
@@ -16,9 +18,34 @@
 			<a href="/" class="text-amber-400 font-bold text-lg tracking-tight hover:text-amber-300">
 				libnovel
 			</a>
+			{#if data.user}
 			<a href="/books" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
 				Library
 			</a>
+			<a href="/browse" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
+				Browse
+			</a>
+				<div class="ml-auto flex items-center gap-4">
+					<span class="text-zinc-400 text-sm hidden sm:block">{data.user.username}</span>
+					<form method="POST" action="/logout">
+						<button
+							type="submit"
+							class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors"
+						>
+							Sign out
+						</button>
+					</form>
+				</div>
+			{:else}
+				<div class="ml-auto">
+					<a
+						href="/login"
+						class="text-sm px-3 py-1.5 rounded bg-amber-400 text-zinc-900 font-semibold hover:bg-amber-300 transition-colors"
+					>
+						Sign in
+					</a>
+				</div>
+			{/if}
 		</nav>
 	</header>