Build Responsive Mobile-First Navigation

**Title:** Create Adaptive Navigation with Bottom Tab Bar and Hamburger Menu

## Problem Statement

The current navigation is not optimized for mobile devices, making it difficult for users to navigate on smaller screens. Mobile users represent a significant portion of the user base and need a touch-optimized navigation experience.

## Proposed Solution

Implement responsive navigation with:

* Bottom tab bar for mobile devices
* Hamburger menu for additional options
* Desktop sidebar or top navigation
* Smooth transitions between layouts
* Active state indicators
* Touch-optimized hit areas

## Acceptance Criteria

### ✅ Mobile Bottom Tab Bar

* Fixed position at bottom of screen
* 4-5 primary navigation items
* Icons with labels (optional labels)
* Active tab highlighted with color/underline
* Smooth transition animations
* Haptic feedback on tap (mobile)
* Safe area insets for notched devices

### ✅ Tab Items

* Home tab with house icon
* Quiz tab with book/question icon
* History tab with clock icon
* Profile tab with user icon
* More tab with three dots (overflow menu)

### ✅ Hamburger Menu

* Icon in top-left or top-right corner
* Slide-in side drawer animation
* Semi-transparent backdrop
* Close on backdrop click
* Swipe to close gesture
* Menu items with icons
* Organized sections (Account, Settings, About)

### ✅ Desktop Navigation

* Top navigation bar or sidebar
* Logo on left
* Navigation links in center
* User profile/settings on right
* Dropdown menus for sub-items
* Hover effects
* Breadcrumb navigation for deep pages

### ✅ Responsive Breakpoints

* Mobile: Bottom tab bar (< 768px)
* Tablet: Modified bottom bar or top nav (768px - 1024px)
* Desktop: Full navigation bar or sidebar (> 1024px)
* Smooth transitions between layouts
* No layout shift during resize

### ✅ Active State Indicators

* Highlight current route
* Active tab different color
* Underline or background highlight
* Icon color change
* Maintain active state on page refresh

### ✅ Navigation Items

* Home/Dashboard
* Categories/Browse
* My Quizzes/History
* Leaderboard
* Settings
* Profile
* Help/FAQ
* About

### ✅ Accessibility

* Keyboard accessible
* ARIA labels for icon-only items
* Focus visible on tab navigation
* Screen reader announcements
* Touch targets minimum 44x44px