new menu, trying to keep envs, faster api calls etc

frontend/src/main.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
@@ -26,25 +26,44 @@ function ProtectedRoute({ children }) {
 
 function Header() {
   const { user, logout } = useAuth();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   
   if (!user) return null;
   
+  const handleLogout = () => {
+    setMobileMenuOpen(false);
+    logout();
+  };
+  
+  const closeMobileMenu = () => setMobileMenuOpen(false);
+  
   return (
     <header className="header">
       <div className="container">
         <nav className="nav">
-          <div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
-            <h2 style={{ margin: 0 }}>WTP</h2>
-            <ul className="nav-links">
-              <li><Link to="/challenges">Challenges</Link></li>
-              <li><Link to="/leaderboard">Leaderboard</Link></li>
-              <li><Link to="/friends">Friends</Link></li>
-              <li><Link to="/profile">Profile</Link></li>
-            </ul>
+          <div className="nav-brand">
+            <h2>WTP</h2>
+            <button 
+              className="hamburger" 
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label="Toggle menu"
+            >
+              <span></span>
+              <span></span>
+              <span></span>
+            </button>
+          </div>
+          <div className={`nav-menu ${mobileMenuOpen ? 'active' : ''}`}>
+            <ul className="nav-links">
+              <li><Link to="/challenges" onClick={closeMobileMenu}>Challenges</Link></li>
+              <li><Link to="/leaderboard" onClick={closeMobileMenu}>Leaderboard</Link></li>
+              <li><Link to="/friends" onClick={closeMobileMenu}>Friends</Link></li>
+              <li><Link to="/profile" onClick={closeMobileMenu}>Profile</Link></li>
+            </ul>
+            <button onClick={handleLogout} className="btn btn-secondary btn-sm logout-btn">
+              Logout
+            </button>
           </div>
-          <button onClick={logout} className="btn btn-secondary btn-sm">
-            Logout
-          </button>
         </nav>
       </div>
     </header>