From cf3a3ad9106dc22d9d1531331961b0afd757f745 Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Sat, 11 Apr 2026 17:30:55 +0500
Subject: [PATCH] feat: add backdrop blur overlay when mobile hamburger menu is
 open

---
 ui/src/routes/+layout.svelte | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 2d8e656..145638f 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -745,14 +745,24 @@
 					</Button>
 				</div>
 
-				<!-- Click-outside overlay for dropdowns -->
-				{#if langMenuOpen || userMenuOpen}
-					<div
-						class="fixed inset-0 z-40"
-						onpointerdown={() => { langMenuOpen = false; userMenuOpen = false; }}
-						aria-hidden="true"
-					></div>
-				{/if}
+		<!-- Click-outside overlay for dropdowns -->
+			{#if langMenuOpen || userMenuOpen}
+				<div
+					class="fixed inset-0 z-40"
+					onpointerdown={() => { langMenuOpen = false; userMenuOpen = false; }}
+					aria-hidden="true"
+				></div>
+			{/if}
+
+			<!-- Backdrop for mobile hamburger menu -->
+			{#if menuOpen}
+				<div
+					class="fixed inset-0 z-40 sm:hidden"
+					style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);"
+					onpointerdown={() => { menuOpen = false; }}
+					aria-hidden="true"
+				></div>
+			{/if}
 			{:else}
 				<div class="ml-auto">
 					<a