From 863b3fa3a27166a0ea81486426f07dd0a9bf6d45 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 16:55:36 +0100
Subject: [PATCH] [#764] Add backdrop overlay to close mobile nav on outside
 tap

Renders a fixed transparent backdrop (z-40) behind the mobile dropdown
(z-50) when the menu is open. Tapping anywhere outside the menu
dismisses it. Only rendered on mobile (md:hidden).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/NavBar.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 71e6dbd2..01776e12 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -104,9 +104,17 @@ export function NavBar() {
         </div>
       </div>
 
+      {/* Mobile backdrop — closes menu on outside tap */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 md:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
       {/* Mobile dropdown */}
       {mobileOpen && (
-        <div className="border-t border-[var(--border)] bg-[var(--bg)] px-4 pb-3 pt-2 md:hidden">
+        <div className="relative z-50 border-t border-[var(--border)] bg-[var(--bg)] px-4 pb-3 pt-2 md:hidden">
           <div className="flex flex-col gap-1">
             {navLinks.map(({ href, label }) => {
               const active = isActive(href, label);