From 724c17e21933b1fb622b81a1769637d883eeecab Mon Sep 17 00:00:00 2001
From: whiteghost0001 <bigkaytwo@gmail.com>
Date: Mon, 29 Jun 2026 18:16:55 +0100
Subject: [PATCH] feat(#406): implement responsive mobile menu drawer

- Replace Header's inline mobile menu with MobileMenu component
- MobileMenu renders a slide-in drawer from the right
- Overlay backdrop closes menu on click
- Escape key and close button dismiss the drawer
- Focus trap and body scroll lock for accessibility
- MobileMenuButton shows hamburger icon, hidden on lg+ screens
---
 nevo_frontend/components/Header.tsx | 113 ++++++----------------------
 1 file changed, 24 insertions(+), 89 deletions(-)

diff --git a/nevo_frontend/components/Header.tsx b/nevo_frontend/components/Header.tsx
index 79783a1e..754ccd54 100644
--- a/nevo_frontend/components/Header.tsx
+++ b/nevo_frontend/components/Header.tsx
@@ -1,26 +1,17 @@
 'use client';
 
-import React, { useState } from 'react';
 import Link from 'next/link';
+import { useState } from 'react';
 import { Button } from './Button';
+import { MobileMenu, MobileMenuButton, NAV_LINKS } from './MobileMenu';
 
 export const Header = () => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-
-  const navLinks = [
-    { name: 'Home', href: '/' },
-    { name: 'Browse Pools', href: '/pools' },
-    { name: 'Create Pool', href: '/create-pool' },
-    { name: 'Dashboard', href: '/dashboard' },
-    { name: 'Stories', href: '/stories' },
-    { name: 'Contact', href: '/contact' },
-    { name: 'Donations', href: '/donations' },
-  ];
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white shadow-sm dark:bg-gray-900 dark:border-gray-800">
-      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center">
+    <>
+      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white shadow-sm dark:bg-gray-900 dark:border-gray-800">
+        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
           <Link
             href="/"
             className="flex items-center gap-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 rounded"
@@ -29,87 +20,31 @@ export const Header = () => {
               Nevo
             </span>
           </Link>
-        </div>
-
-        {/* Desktop Navigation */}
-        <nav aria-label="Global" className="hidden md:flex md:gap-x-8">
-          {navLinks.map((link) => (
-            <Link
-              key={link.name}
-              href={link.href}
-              className="text-sm font-semibold leading-6 text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 rounded"
-            >
-              {link.name}
-            </Link>
-          ))}
-        </nav>
-
-        <div className="hidden md:flex md:items-center">
-          <Button variant="primary" size="small">
-            Connect Wallet
-          </Button>
-        </div>
-
-        {/* Mobile menu button */}
-        <div className="flex md:hidden">
-          <button
-            type="button"
-            id="mobile-menu-button"
-            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            aria-expanded={isMobileMenuOpen}
-            aria-controls="mobile-menu"
-            aria-label={isMobileMenuOpen ? 'Close main menu' : 'Open main menu'}
-          >
-            <span className="sr-only">
-              {isMobileMenuOpen ? 'Close main menu' : 'Open main menu'}
-            </span>
-            <svg
-              className="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth="1.5"
-              stroke="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
 
-      {/* Mobile menu */}
-      {isMobileMenuOpen && (
-        <div
-          id="mobile-menu"
-          className="md:hidden"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="mobile-menu-button"
-        >
-          <div className="space-y-1 px-4 pb-3 pt-2 sm:px-6">
-            {navLinks.map((link) => (
+          {/* Desktop Navigation */}
+          <nav aria-label="Global" className="hidden md:flex md:gap-x-8">
+            {NAV_LINKS.map((link) => (
               <Link
-                key={link.name}
+                key={link.href}
                 href={link.href}
-                className="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800"
-                onClick={() => setIsMobileMenuOpen(false)}
+                className="text-sm font-semibold leading-6 text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 rounded"
               >
-                {link.name}
+                {link.label}
               </Link>
             ))}
-            <div className="mt-4 px-3">
-              <Button variant="primary" size="medium" className="w-full">
-                Connect Wallet
-              </Button>
-            </div>
+          </nav>
+
+          <div className="hidden md:flex md:items-center">
+            <Button variant="primary" size="small">
+              Connect Wallet
+            </Button>
           </div>
+
+          <MobileMenuButton open={menuOpen} onOpen={() => setMenuOpen(true)} />
         </div>
-      )}
-    </header>
+      </header>
+
+      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
+    </>
   );
 };