improve menu behavior

2026-01-30 16:35:05 -05:00
parent 9c0fd35804
commit 45c98f9fc7
5 changed files with 39 additions and 7 deletions
@@ -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>