Skip to content

Add compact mobile header with hamburger menu and slide-in drawer (#218) - #267

Merged
arisu6804 merged 1 commit into
RemitFlow:mainfrom
Hollujay:feat/218-add-compact-mobile-header
Jul 24, 2026
Merged

Add compact mobile header with hamburger menu and slide-in drawer (#218)#267
arisu6804 merged 1 commit into
RemitFlow:mainfrom
Hollujay:feat/218-add-compact-mobile-header

Conversation

@Hollujay

@Hollujay Hollujay commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a compact mobile header that replaces the full desktop navigation with a hamburger-triggered slide-in drawer on viewports ≤720px.

Changes

src/components/Navbar.jsx

  • Added hamburger menu button with aria-expanded and aria-label for accessibility
  • Added semi-transparent backdrop overlay when the mobile drawer is open
  • Added a slide-in drawer (<aside> with aria-label="Mobile navigation") containing navigation links with icons, LocaleSelect, and WalletButton
  • Drawer closes on: hamburger click, nav link click, backdrop click, Escape key press
  • Body scroll is locked (overflow: hidden) while the drawer is open
  • Desktop behavior is completely unchanged

src/components/Navbar.css

  • Added .navbar-hamburger — 44×44px touch target, display: none on desktop, shown as a flex column at ≤720px
  • Added .navbar-backdrop — fixed full-screen semi-transparent overlay (z-index 90)
  • Added .navbar-drawer — 280px fixed panel sliding in from the right (z-index 100, CSS transition)
  • Added .navbar-drawer--open — transforms to translateX(0)
  • Added .navbar-drawer-link — 44px min-height touch target with icon and label
  • Added .navbar-drawer-actions — bordered section at bottom for locale/wallet
  • Hidden .navbar-links and .navbar-actions at ≤720px via media query

src/responsive.css

  • Removed obsolete .navbar { flex-wrap: wrap } rule since nav links and actions are now hidden on mobile

test/components/Navbar.test.jsx (new)

  • 9 tests covering:
    • Brand name rendering
    • Navigation links (present in both desktop navbar and drawer)
    • Active link highlighting by route
    • Hamburger button presence and aria-expanded state
    • Drawer open/close on hamburger click
    • Drawer close on nav link click
    • Drawer close on Escape key
    • Drawer close on backdrop click
    • LocaleSelect and WalletButton rendered in drawer

test/touch-targets.test.js

  • Added checks for .navbar-hamburger (min-width/min-height 44px)
  • Added checks for .navbar-drawer-link (min-height 44px)

src/components/Navbar.stories.jsx

  • Added MemoryRouter decorator for isolated story rendering

Closes #218

@arisu6804

Copy link
Copy Markdown
Contributor

Clean diff — LGTM! 💯

@arisu6804

Copy link
Copy Markdown
Contributor

Clean — merged. 🎉

@arisu6804
arisu6804 merged commit b1e7461 into RemitFlow:main Jul 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a compact mobile header

2 participants