fix: navbar layout and styling improvements

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/lib/components/layout/NavBar.svelte

@@ -8,14 +8,15 @@
 
 	// Centralized link definition
 	const links = [
-		{ href: '/', label: 'Home', showWhen: 'always', width: 'w-12' },
+		{ href: '/', label: 'Home', showWhen: 'non-admin', width: 'w-12' },
 		{ href: '/prices', label: 'Price List', showWhen: 'guest', width: 'w-20' },
 		{ href: '/schedule', label: 'My Schedule', showWhen: 'auth-not-admin', width: 'w-24' },
-		{ href: '/book', label: 'Book an appointment', showWhen: 'auth', width: 'w-36' },
+		{ href: '/book', label: 'Book an appointment', showWhen: 'non-admin', width: 'w-36' },
 		{ href: '/portfolio', label: 'Portfolio', showWhen: 'always', width: 'w-20' },
 		{ href: '/admin', label: 'Admin Dashboard', showWhen: 'admin', width: 'w-28' },
 		{ href: '/today', label: 'Today', showWhen: 'admin', width: 'w-28' },
-		{ href: '/contact', label: 'Contact', showWhen: 'always', width: 'w-16' },
+		{ href: '/admin/schedule', label: 'Schedule', showWhen: 'admin', width: 'w-20' },
+		{ href: '/contact', label: 'Contact', showWhen: 'non-admin', width: 'w-16' },
 		{ href: '/account', label: 'My Account', showWhen: 'auth', width: 'w-24' }
 	];
 
@@ -35,11 +36,8 @@
 	const canShow = (link: { href: string; label: string; showWhen: string; width: string }) => {
 		if (authStore.isLoading) return true;
 
-		// hide booking link for admins
-		if (link.href === '/book' && authStore.currentUser?.role === 'admin') return false;
-		if (link.href === '/contact' && authStore.currentUser?.role === 'admin') return false;
-
 		if (link.showWhen === 'always') return true;
+		if (link.showWhen === 'non-admin' && authStore.currentUser?.role !== 'admin') return true;
 		if (link.showWhen === 'guest' && !authStore.isAuthenticated) return true;
 		if (link.showWhen === 'auth' && authStore.isAuthenticated) return true;
 		if (
@@ -140,34 +138,43 @@
 				{/each}
 			</div>
 
-		<div class="hidden items-center gap-4 md:flex">
+			<div class="hidden items-center gap-4 md:flex">
-			{#if isAuthenticated}
+				{#if isAuthenticated}
-				<a
+					<a
-					href="/notifications"
+						href="/notifications"
-					class="relative text-gray-600 hover:text-primary"
+						class="relative text-gray-600 hover:text-primary"
-					aria-label="Notifications"
+						aria-label="Notifications"
-				>
+					>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+						<svg
-						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							xmlns="http://www.w3.org/2000/svg"
-						<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+							width="24"
-						<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+							height="24"
-					</svg>
+							viewBox="0 0 24 24"
-					{#if unreadCount > 0}
+							fill="none"
-						<span
+							stroke="currentColor"
-							class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
 						>
-							{unreadCount > 9 ? '9+' : unreadCount}
+							<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-						</span>
+							<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-					{/if}
+						</svg>
-				</a>
+						{#if unreadCount > 0}
-			{/if}
+							<span
-			{#if !isLoading && !isAuthenticated && $page.url.pathname !== '/login'}
+								class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
-				<Button href="/login">Login</Button>
+							>
-			{/if}
+								{unreadCount > 9 ? '9+' : unreadCount}
-			{#if isLoading}
+							</span>
-				<Skeleton class="h-8 w-16 rounded" />
+						{/if}
-			{/if}
+					</a>
-		</div>
+				{/if}
+				{#if !isLoading && !isAuthenticated && $page.url.pathname !== '/login'}
+					<Button href="/login">Login</Button>
+				{/if}
+				{#if isLoading}
+					<Skeleton class="h-8 w-16 rounded" />
+				{/if}
+			</div>
 
 			<!-- Mobile: Burger -->
 			<div class="flex items-center md:hidden">
@@ -188,7 +195,7 @@
 	<!-- Mobile Menu -->
 	{#if mobileMenuOpen}
 		<div class="border-b border-gray-200 bg-background md:hidden">
-			<div class="space-y-1 px-4 pt-2 pb-3">
+			<div class="space-y-1 px-2 pt-2 pb-3">
 				{#each links as link}
 					{#if canShow(link)}
 						{#if isLoading}
@@ -196,7 +203,7 @@
 						{:else}
 							<a
 								href={link.href}
-								class="block rounded px-3 py-3 text-center text-primary hover:text-gray-800"
+								class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
 							>
 								{link.label}
 							</a>
@@ -207,11 +214,13 @@
 				{#if isAuthenticated}
 					<a
 						href="/notifications"
-						class="flex items-center justify-center gap-2 rounded px-3 py-3 text-primary hover:text-gray-800"
+						class="flex items-center justify-center gap-2 rounded px-3 py-2 text-primary hover:text-gray-800"
 					>
 						<span>Notifications</span>
 						{#if unreadCount > 0}
-							<span class="flex h-6 w-6 min-w-6 items-center justify-center rounded-full bg-red-500 px-1.5 text-[10px] font-bold text-white">
+							<span
+								class="flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
+							>
 								{unreadCount > 9 ? '9+' : unreadCount}
 							</span>
 						{/if}