#157 fix(ui): make top navigation bar mobile responsive and eliminate horizontal scrolling (#154)

[Anonymous]

Originally created by: amasen02

## Summary

Fixes [#154] — makes the main navigation bar mobile responsive and eliminates horizontal page scrolling on mobile viewports (<768px).

Root Cause

TopNav rendered a fixed desktop layout with:

1. px-10 and gap-9 without responsive scaling.
2. Full horizontal tab list directly in the flex row without hiding on small screens.
3. No mobile collapse or menu toggle mechanism.

On mobile viewports, these elements maintained their desktop dimensions and overflowed the viewport, causing unwanted horizontal page scrolling.

Solution

1. Responsive Header Layout:
2. Scaled header padding to px-4 md:px-10 and gaps to gap-3 md:gap-9.
3. Hidden desktop navigation tabs on mobile screens (hidden md:flex).
4. Mobile Drawer & Toggle:
5. Added a mobile toggle button (md:hidden) with Menu and X icons from lucide-react.
6. Added a collapsible mobile navigation drawer rendering all navigation links and mobile "Hire agent" action button.
7. Automatically collapses the mobile drawer on route navigation via pathname watcher.

Verification

• npx tsc --noEmit: 0 TypeScript errors.
• npx next build: production build passed cleanly with Turbopack (20/20 routes).

Checklist

• [x] Responsive padding and spacing
• [x] Collapsible hamburger menu and drawer
• [x] Zero horizontal scrolling on mobile viewports
• [x] Production build passed
• [x] Staged as Draft PR