[UI/Mobile] Resizable Navbar Component - Multiple Responsiveness and Accessibility Issues

[moheladwy]

Summary

The resizable-navbar.tsx component has multiple critical issues affecting mobile usability, responsiveness, and accessibility. These issues impact the user experience across different screen sizes and assistive technologies.

Issues Identified

Critical (Mobile Breaking)

1. Hard-coded minimum width breaks tablet layouts

   • NavBody has minWidth: "800px" causing horizontal overflow on tablets (768-800px)
   • Location: Line 99
   • Impact: Users on tablets see broken layout with horizontal scrolling

2. Aggressive width animation breaks desktop layout

   • NavBody animates from 100% to 40% width on scroll
   • Location: Lines 93-94
   • Impact: Content shifts drastically, creating jarring UX

3. Mobile menu positioning assumes fixed height

   • MobileNavMenu uses hard-coded top-16 positioning
   • Location: Line 206
   • Impact: Menu can overlap or have gaps if navbar height changes

High Priority (Accessibility)

4. Missing ARIA labels and button semantics

   • MobileNavToggle uses icons with onClick instead of proper button element
   • Location: Lines 217-228
   • Impact: Screen readers cannot properly announce toggle state

5. No keyboard navigation support

   • Mobile menu lacks:
     • Escape key to close
     • Focus trap when open
     • Focus restoration on close
   • Impact: Keyboard-only users cannot properly navigate

6. Missing reduced-motion support

   • Heavy Framer Motion animations without prefers-reduced-motion checks
   • Impact: Motion-sensitive users experience discomfort

Medium Priority (UX)

7. No scroll handling in mobile menu

   • Long menu lists have no scroll container
   • Location: Lines 198-218
   • Impact: Menu items can overflow on small screens

8. Hard-coded placeholder logo

   • NavbarLogo component uses Aceternity assets instead of accepting props
   • Location: Lines 235-240
   • Impact: Not reusable, requires custom wrapper

9. Inconsistent z-index values

   • NavBody: z-[60] (line 104)
   • MobileNav: z-50 (line 170)
   • MobileNavMenu: z-50 (line 206)
   • Impact: Potential stacking context issues with overlays/modals

10. No touch gesture support

    • Mobile menu lacks swipe-to-close gesture
    • Impact: Poor mobile UX, users expect gesture controls

Low Priority (Enhancement)

11. Touch target size compliance

    • NavbarButton doesn't enforce 44x44px minimum touch targets (WCAG 2.1)
    • Location: Lines 250-290
    • Impact: Difficult to tap on mobile devices

12. NavItems component unused on mobile

    • Always hidden with hidden ... lg:flex without mobile alternative
    • Location: Lines 119-143
    • Impact: Incomplete mobile navigation pattern

Suggested Fixes

Immediate (Critical)

• Remove minWidth: "800px" or make it responsive (min(800px, 100vw - 2rem))
• Change width animation to less aggressive values (e.g., 100% → 95%)
• Use dynamic positioning for mobile menu (calculate based on navbar ref height)

Short-term (High Priority)

• Wrap MobileNavToggle icons in <button> with proper ARIA attributes
• Add keyboard event handlers (Escape, Tab trap, focus management)
• Implement prefers-reduced-motion media query checks
• Add ARIA attributes: aria-expanded, aria-label, role="navigation"

Long-term (Medium/Low)

• Add scroll container to MobileNavMenu with max-height
• Make NavbarLogo accept src, alt, and title props
• Standardize z-index using CSS variables or constants
• Implement swipe gesture library (e.g., react-swipeable)
• Ensure all interactive elements meet WCAG touch target requirements

Environment

• Component: src/components/ui/resizable-navbar.tsx
• Dependencies: Framer Motion, Tabler Icons
• Affected platforms: Mobile (< 1024px), Tablet (768-800px)

Additional Context

This component is used in the main navigation bar (src/views/components/common/ui/NavBar.tsx) and affects the entire application navigation experience. Fixing these issues will significantly improve accessibility compliance and mobile user satisfaction.