From 10c7a48bc6b627897f8ed9ed0f068c477c87cf12 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Tue, 31 Mar 2026 17:07:28 +0500
Subject: [PATCH] fix(admin): move mobile nav toggle into content area to avoid
 z-index conflict

The fixed top bar was hidden behind the main site navbar (z-50).
Replace with an inline 'Admin menu' button at the top of the content.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/routes/admin/+layout.svelte | 36 +++++++++++++-----------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/ui/src/routes/admin/+layout.svelte b/ui/src/routes/admin/+layout.svelte
index 33111f8..0f3644e 100644
--- a/ui/src/routes/admin/+layout.svelte
+++ b/ui/src/routes/admin/+layout.svelte
@@ -29,35 +29,17 @@
 <!-- Mobile sidebar overlay -->
 {#if sidebarOpen}
 	<button
-		class="fixed inset-0 z-20 bg-black/50 md:hidden"
+		class="fixed inset-0 z-40 bg-black/50 md:hidden"
 		onclick={() => (sidebarOpen = false)}
 		aria-label="Close sidebar"
 	></button>
 {/if}
 
 <div class="flex min-h-[calc(100vh-4rem)] gap-0">
-	<!-- Mobile top bar -->
-	<div class="md:hidden fixed top-0 left-0 right-0 z-10 h-16 flex items-center px-4 border-b border-(--color-border) bg-(--color-bg)">
-		<button
-			onclick={() => (sidebarOpen = !sidebarOpen)}
-			class="p-2 rounded-md text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
-			aria-label="Toggle navigation"
-		>
-			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				{#if sidebarOpen}
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-				{:else}
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-				{/if}
-			</svg>
-		</button>
-		<span class="ml-3 text-sm font-semibold text-(--color-muted) uppercase tracking-widest">Admin</span>
-	</div>
-
 	<!-- Sidebar -->
 	<aside
 		class="
-			fixed top-0 left-0 h-full z-30 w-56 shrink-0 border-r border-(--color-border) px-3 py-6 flex flex-col gap-6
+			fixed top-0 left-0 h-full z-50 w-56 shrink-0 border-r border-(--color-border) px-3 py-6 flex flex-col gap-6
 			bg-(--color-bg) transition-transform duration-200
 			{sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
 			md:relative md:translate-x-0 md:w-48 md:z-auto md:top-auto md:h-auto
@@ -105,7 +87,19 @@
 	</aside>
 
 	<!-- Main content -->
-	<main class="flex-1 min-w-0 px-4 py-6 md:px-8 pt-20 md:pt-6">
+	<main class="flex-1 min-w-0 px-4 py-6 md:px-8">
+		<!-- Mobile nav toggle -->
+		<button
+			onclick={() => (sidebarOpen = true)}
+			class="md:hidden mb-4 flex items-center gap-2 text-sm text-(--color-muted) hover:text-(--color-text) transition-colors"
+			aria-label="Open navigation"
+		>
+			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+			</svg>
+			Admin menu
+		</button>
+
 		{@render children?.()}
 	</main>
 </div>