From 28cafe2aa8d133dc9583dde6e31d249a73d64d3c Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Tue, 31 Mar 2026 16:33:17 +0500
Subject: [PATCH] fix(admin): make sidebar responsive on mobile with slide-out
 drawer

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

diff --git a/ui/src/routes/admin/+layout.svelte b/ui/src/routes/admin/+layout.svelte
index 2beadf8..33111f8 100644
--- a/ui/src/routes/admin/+layout.svelte
+++ b/ui/src/routes/admin/+layout.svelte
@@ -22,11 +22,47 @@
 		children?: import('svelte').Snippet;
 	}
 	let { children }: Props = $props();
+
+	let sidebarOpen = $state(false);
 </script>
 
+<!-- Mobile sidebar overlay -->
+{#if sidebarOpen}
+	<button
+		class="fixed inset-0 z-20 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="w-48 shrink-0 border-r border-(--color-border) px-3 py-6 flex flex-col gap-6">
+	<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
+			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
+		"
+	>
 		<!-- Internal pages -->
 		<div>
 			<p class="px-2 mb-2 text-xs font-semibold text-(--color-muted) uppercase tracking-widest">{m.admin_pages_label()}</p>
@@ -34,6 +70,7 @@
 				{#each internalLinks as link}
 					<a
 						href={link.href}
+						onclick={() => (sidebarOpen = false)}
 						class="px-2 py-1.5 rounded-md text-sm font-medium transition-colors
 							{page.url.pathname.startsWith(link.href)
 								? 'bg-(--color-surface-2) text-(--color-text)'
@@ -68,7 +105,7 @@
 	</aside>
 
 	<!-- Main content -->
-	<main class="flex-1 min-w-0 px-8 py-6">
+	<main class="flex-1 min-w-0 px-4 py-6 md:px-8 pt-20 md:pt-6">
 		{@render children?.()}
 	</main>
 </div>