Skip to content

feat(#406): implement responsive mobile menu drawer #815

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Akshola00 merged 1 commit into from
Jun 30, 2026
Merged

feat(#406): implement responsive mobile menu drawer #815

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 24 additions & 89 deletions nevo_frontend/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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)} />
</>
);
};
Loading