From 45c98f9fc72c999055d33c46789e785bdc65554d Mon Sep 17 00:00:00 2001
From: Mike Johnston <mike@nervesocket.com>
Date: Fri, 30 Jan 2026 16:35:05 -0500
Subject: [PATCH] improve menu behavior

---
 frontend/src/App.css                   | 25 +++++++++++++++++++++++++
 frontend/src/main.jsx                  |  9 ++++++++-
 frontend/src/pages/ChallengeDetail.jsx |  4 ++--
 frontend/src/pages/ChallengeList.jsx   |  4 ++--
 frontend/src/pages/Friends.jsx         |  4 ++--
 5 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 47f9a00..b241842 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -166,6 +166,10 @@ body {
   transition: all 0.3s ease;
 }
 
+.nav-backdrop {
+  display: none;
+}
+
 .nav-menu {
   display: flex;
   align-items: center;
@@ -258,6 +262,27 @@ body {
     display: flex;
   }
 
+  .nav-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    animation: fadeIn 0.3s ease;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
   .hamburger.active span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);
   }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 6db3499..fcbfad7 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -44,7 +44,7 @@ function Header() {
           <div className="nav-brand">
             <h2>WTP</h2>
             <button 
-              className="hamburger" 
+              className={`hamburger ${mobileMenuOpen ? 'active' : ''}`}
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
               aria-label="Toggle menu"
             >
@@ -53,6 +53,13 @@ function Header() {
               <span></span>
             </button>
           </div>
+          {mobileMenuOpen && (
+            <div 
+              className="nav-backdrop" 
+              onClick={closeMobileMenu}
+              aria-hidden="true"
+            />
+          )}
           <div className={`nav-menu ${mobileMenuOpen ? 'active' : ''}`}>
             <ul className="nav-links">
               <li><Link to="/challenges" onClick={closeMobileMenu}>Challenges</Link></li>
diff --git a/frontend/src/pages/ChallengeDetail.jsx b/frontend/src/pages/ChallengeDetail.jsx
index 948d1a8..da21b94 100644
--- a/frontend/src/pages/ChallengeDetail.jsx
+++ b/frontend/src/pages/ChallengeDetail.jsx
@@ -175,7 +175,7 @@ export default function ChallengeDetail() {
       return;
     }
 
-    // Debounce search by 1 second
+    // Debounce search by 0.5 second
     const timeout = setTimeout(async () => {
       try {
         const data = await api.searchUsers(query);
@@ -183,7 +183,7 @@ export default function ChallengeDetail() {
       } catch (err) {
         console.error('Search failed:', err);
       }
-    }, 1000);
+    }, 500);
     
     setSearchTimeout(timeout);
   };
diff --git a/frontend/src/pages/ChallengeList.jsx b/frontend/src/pages/ChallengeList.jsx
index 90adfe1..f0baccc 100644
--- a/frontend/src/pages/ChallengeList.jsx
+++ b/frontend/src/pages/ChallengeList.jsx
@@ -80,7 +80,7 @@ export default function ChallengeList() {
       return;
     }
 
-    // Debounce search by 1.5 seconds
+    // Debounce search by 0.75 seconds
     const timeout = setTimeout(async () => {
       try {
         const data = await api.searchShows(query);
@@ -88,7 +88,7 @@ export default function ChallengeList() {
       } catch (err) {
         console.error('Search failed:', err);
       }
-    }, 1500);
+    }, 750);
     
     setSearchTimeout(timeout);
   };
diff --git a/frontend/src/pages/Friends.jsx b/frontend/src/pages/Friends.jsx
index cc9dbb8..3dc3a3d 100644
--- a/frontend/src/pages/Friends.jsx
+++ b/frontend/src/pages/Friends.jsx
@@ -79,7 +79,7 @@ export default function Friends() {
       return;
     }
 
-    // Debounce search by 1 second
+    // Debounce search by 0.5 second
     const timeout = setTimeout(async () => {
       try {
         const data = await api.searchUsers(query);
@@ -87,7 +87,7 @@ export default function Friends() {
       } catch (err) {
         console.error('Search failed:', err);
       }
-    }, 1000);
+    }, 500);
     
     setSearchTimeout(timeout);
   };