Skip to content

Closes #222: feat(ui): Implement Responsive Mobile Navigation Drawer with Gesture Support #222 - #306

Open
Promise278 wants to merge 6 commits into
Epta-Node:mainfrom
Promise278:feat/mobile-drawer-gestures
Open

Closes #222: feat(ui): Implement Responsive Mobile Navigation Drawer with Gesture Support #222#306
Promise278 wants to merge 6 commits into
Epta-Node:mainfrom
Promise278:feat/mobile-drawer-gestures

Conversation

@Promise278

Copy link
Copy Markdown

Closes #222

Summary

Redesign the mobile navigation drawer to provide a gesture-driven, accessible experience.

Changes

  • Swipe-to-close: framer-motion drag gesture closes drawer on swipe >100px or velocity >500px/s
  • Focus trap: Tab/Shift+Tab cycles within the open drawer, preventing keyboard escape
  • Close-on-navigate: drawer auto-closes when route changes
  • Backdrop tap: dismisses with 150ms fade-out animation
  • Adaptive height: 70vh on short screens, 85vh on tall screens
  • Shared nav items: NAV_ITEMS exported from MobileDrawer, consumed by Sidebar for menu parity
  • useMediaQuery hook: replaces manual window.innerWidth tracking

Files Modified

File Action
frontend/src/hooks/useMediaQuery.ts New: responsive breakpoint hook
frontend/src/components/layout/MobileDrawer.tsx framer-motion gestures, focus trap, aria-modal dialog
frontend/src/components/layout/MobileDrawer.css Adaptive heights, drag handle, trap-focus class
frontend/src/components/layout/Sidebar.tsx Import NAV_ITEMS from MobileDrawer
frontend/src/components/layout/AppShell.tsx Use useMediaQuery, close drawer on route change
frontend/src/components/layout/MobileDrawer.test.tsx New: 15 unit tests
frontend/src/components/layout/AppShell.test.tsx Updated role query for dialog
frontend/vitest.config.ts framer-motion CJS alias for jsdom
frontend/vitest.setup.ts window.matchMedia mock

Test Results

  • 140/140 tests passing across 14 test files
  • 15 new tests covering: rendering, close callbacks, close-on-navigate, focus trap, NAV_ITEMS export

Acceptance Criteria

  • Swipe-right gesture closes drawer via framer-motion pan
  • Drawer auto-closes on route navigation
  • Backdrop tap dismisses with fade-out
  • Height adapts: 70vh short / 85vh tall screens
  • Focus trap prevents Tab escape
  • Drawer state resets on page navigation
  • Performance: spring damping 30 / stiffness 400 (<200ms)
  • Unit tests cover gesture callbacks, close-on-navigate, focus trap

…eight

- Add framer-motion drag gesture for swipe-to-close (threshold: 100px / 500px velocity)
- Implement keyboard focus trap cycling Tab/Shift+Tab within drawer
- Auto-close drawer on route navigation and backdrop tap
- Adaptive height: 70vh on short screens, 85vh on tall screens
- Export NAV_ITEMS from MobileDrawer for drawer/sidebar parity
- Add useMediaQuery hook for responsive breakpoint detection
- Add MobileDrawer.test.tsx: 15 unit tests covering gestures, close-on-navigate, focus trap
- Fix framer-motion ESM resolution in vitest config
- Add window.matchMedia mock to vitest.setup.ts for jsdom
- All 140 tests passing
@vercel

vercel Bot commented Aug 22, 2026

Copy link
Copy Markdown

@Promise278 is attempting to deploy a commit to the Jaja's projects Team on Vercel.

A member of the Team first needs to authorize it.

@devJaja
devJaja self-requested a review August 24, 2026 00:40
@devJaja

devJaja commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

Well done @Promise278

Kindly fix the CI / frontend failing, also reolve the conflicts

…9 verification

Implement attest_capability, verify_attestation, revoke_attestation, and
get_attestation functions with signature verification, expiry, and revocation.
Include 22 unit tests covering creation, verification, revocation, expiry,
and error cases. Fix test compilation issues with OsRng, Signer trait import,
Ledger trait import, pubkey_bytes env mismatch, and expiry test TTL handling
- Fix TS2540: make drawerRef mutable (useRef<HTMLDivElement | null>)
- Fix TS6133: remove unused useLocation/useNavigate imports from test
- Merge gesture/focus-trap/drag support with i18n from feat/smart-contract
- Add History nav item, matchMedia mock, and i18n test setup
- Update NAV_ITEMS count in tests from 4 to 5
@Promise278

Copy link
Copy Markdown
Author

@Promise278 is attempting to deploy a commit to the Jaja's projects Team on Vercel.

A member of the Team first needs to authorize it.

done boss review and merge

@devJaja

devJaja commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

@Promise278

The CI / Smart-contract is failing

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.

feat(ui): Implement Responsive Mobile Navigation Drawer with Gesture Support

2 participants