improve menu behavior

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);
   }

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>

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);
   };

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);
   };

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);
   };