feat(p1-01): Mobile Responsive Navigation Menu - #18
Conversation
- Refactored components/header.tsx with Framer Motion slide-in drawer - Route-aware active link highlighting via usePathname - Morphing hamburger/X toggle with staggered menu item reveals - Wallet adapter (WalletMultiButton) integrated in mobile drawer - Added test/mobile-navigation.test.ts (5 tests, all passing) - Verified: npm run lint (0 errors), npm run build (pass), npm run test (38/38) Closes #P1-01
|
Deployment failed with the following error: Learn More: https://vercel.link/3Fpeeb1 |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9ff819669f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {/* Desktop Navigation */} | ||
| <nav className="ml-8 hidden md:flex items-center gap-6"> | ||
| {NAV_LINKS.map((link) => { | ||
| const isActive = pathname === link.href; |
There was a problem hiding this comment.
Update the Header active-link check to handle nested paths (for example /bags/1234 under /bags) instead of strict equality. With const isActive = pathname === link.href, both desktop and mobile menus fail to highlight the correct section on subpages, even though this commit’s route tests explicitly expect subpath matching behavior. This creates inconsistent navigation state for users outside top-level routes.
Useful? React with 👍 / 👎.
1 participant
P1-01: Mobile Responsive Navigation Menu
Closes #17
What was changed
components/header.tsx— Full rewrite with Framer Motion powered mobile navigation:usePathname)WalletMultiButtonintegrated in mobile drawer footertest/mobile-navigation.test.ts— 5 new Vitest unit tests:tasks/p1-01-mobile-navigation.md— Task spec fileVerification
npm run lint: ✅ 0 errors, 5 pre-existing warningsnpm run test: ✅ 38/38 tests pass (5 new, 33 existing)npm run build: ✅ All pages compile and prerenderScreenshots
Premium mobile drawer with glassmorphism styling, smooth spring animations, and full Solana wallet adapter integration.