` on mobile to account for the fixed top bar height > [!NOTE] > The top bar provides access to the **drawer** (secondary nav). The **bottom tab bar** (Phase 2B) handles primary navigation. --- ### Phase 2B: Bottom Tab Bar Component (YouTube-style) #### [NEW] `src/components/mobile-bottom-tabs.tsx` A fixed bottom tab bar visible only on `< lg` screens, providing quick access to primary sections: ``` ┌──────────────────────────────────────────┐ │ 🏠 │ 🎬 │ 📷 │ 🔖 │ │ Home │ Videos │ Photos │ Bookmarks │ └──────────────────────────────────────────┘ ``` - **4 primary tabs**: Home, Videos, Photos, Bookmarks - Active tab highlighted with primary color (filled icon + colored label) - Inactive tabs use muted color - CSS: `lg:hidden fixed bottom-0 left-0 right-0 z-40 h-16 bg-card border-t border-border backdrop-blur-lg` - Uses `safe-area-inset-bottom` padding for devices with home indicators (iPhone notch) - Each tab is a `` using Next.js router, with active state derived from `usePathname()` - Add `pb-16` to `

` on mobile to account for the fixed bottom bar height **Why 4 tabs?** YouTube uses 4-5 tabs. The remaining sections (Surprise Me, Settings, Clusters, Libraries) live in the hamburger drawer — they're less frequently accessed. **Tab touch targets**: Each tab should be at minimum `48px × 48px` (WCAG 2.5.8), with the full tab area being tappable. --- ### Phase 3: Sidebar Refactoring #### [MODIFY] `src/components/sidebar.tsx` **Desktop behavior** (`lg:` and above): - Keep current behavior: persistent sidebar, `w-64`/`w-16` collapse toggle. - Add `hidden lg:flex` to the sidebar container. **Mobile behavior** (`< lg`): - Render as a **fixed overlay drawer** that slides in from the left (opened via hamburger in top bar). - Include a **backdrop** (`bg-black/50`) that closes the drawer on tap. - Use `translate-x` animation for the slide-in/out effect. - The drawer should be `w-72` (slightly wider than desktop's `w-64` for better touch targets). - Add a close button (`X` icon) in the drawer header. - Nav items should have larger touch targets (`min-h-[48px]` per Material Design guidelines). - **Clusters and Libraries sections collapsed by default** — `showClusters` and `showLibraries` should initialize to `false` when in mobile mode. **Structural approach** — two render paths in the same component: ```tsx // Desktop: persistent sidebar // Mobile: overlay drawer {isMobileOpen && (

)} ``` > [!TIP] > On mobile, the drawer acts as **secondary navigation** — users who need Clusters, Libraries, Surprise Me, or Settings will open it from the hamburger. The **bottom tab bar** handles the 4 most common destinations without opening the drawer. --- ### Phase 4: Layout Adjustments #### [MODIFY] `src/app/layout.tsx` ```tsx

{/* visible only < lg */} {/* persistent on lg+, drawer on mobile */}

{children}

{/* visible only < lg */}

``` > [!WARNING] > Both `pt-14` (top bar) and `pb-16` (bottom tab bar) must be applied on mobile only (`lg:pt-0 lg:pb-0`) to avoid wasting space on desktop. #### [MODIFY] `src/app/globals.css` Add animation keyframes for the drawer slide-in: ```css @keyframes slideInFromLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideOutToLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } } .animate-slide-in { animation: slideInFromLeft 0.3s ease-out forwards; } .animate-slide-out { animation: slideOutToLeft 0.3s ease-in forwards; } ``` --- ### Phase 5: Touch & Mobile UX Enhancements #### Touch Targets - Increase nav button heights from `h-10` to `min-h-[48px]` on mobile (WCAG 2.5.8). - Increase icon sizes from `h-4 w-4` to `h-5 w-5` on mobile. - Increase font sizes from `text-sm` to `text-base` on mobile for nav labels. #### Swipe Gesture (Optional, Phase 2) - Add a swipe-right gesture on the left edge of the screen to open the drawer. - Add a swipe-left gesture on the open drawer to close it. - Can be implemented with pointer events (`onTouchStart`, `onTouchMove`, `onTouchEnd`). #### Content Adjustments - The `InfiniteVirtualGrid` and `VirtualizedFolderGrid` will automatically gain more width since the sidebar no longer takes space on mobile. - Consider reducing padding from `p-6` to `p-3` on mobile for content pages. --- ## Files to Change | File | Action | Summary | |------|--------|---------| | `src/contexts/sidebar-context.tsx` | **NEW** | Shared sidebar state context with mobile detection at `lg` breakpoint | | `src/components/mobile-top-bar.tsx` | **NEW** | Mobile-only slim top bar with hamburger + branding | | `src/components/mobile-bottom-tabs.tsx` | **NEW** | YouTube-style bottom tab bar (Home, Videos, Photos, Bookmarks) | | `src/components/sidebar.tsx` | **MODIFY** | Dual-mode: persistent desktop (`lg:flex`) + overlay drawer mobile; Clusters/Libraries collapsed by default on mobile | | `src/app/layout.tsx` | **MODIFY** | Wrap with `SidebarProvider`, add `MobileTopBar` + `MobileBottomTabs`, adjust `

` padding (`pt-14 pb-16 lg:pt-0 lg:pb-0`) | | `src/app/globals.css` | **MODIFY** | Add slide-in/out animations, safe-area-inset-bottom support | | `tailwind.config.ts` | **MODIFY** (optional) | Add custom animation keyframes if preferred over raw CSS | --- ## Visual Mockup ### Desktop (≥1024px) — No Change ``` ┌─────────────┬────────────────────────────────────────┐ │ ▶ NextAV │ │ │─────────────│ Main Content Area │ │ 🏠 Home │ │ │ 🎬 Videos │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ 📷 Photos │ │ Card │ │ Card │ │ Card │ │ │ 🔖 Bookmarks│ └──────┘ └──────┘ └──────┘ │ │ ✨ Surprise │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ ⚙ Settings │ │ Card │ │ Card │ │ Card │ │ │─────────────│ └──────┘ └──────┘ └──────┘ │ │ Clusters │ │ │ Libraries │ │ │─────────────│ │ │ NextAV v1.0│ │ └─────────────┴────────────────────────────────────────┘ ``` ### Mobile/Tablet (<1024px) — Bottom Tab Bar + Top Bar ``` ┌──────────────────────────┐ │ ☰ │ NextAV │ 🔍 │ ← slim top bar (h-14) ├──────────────────────────┤ │ │ │ ┌──────────┐ ┌────────┐│ │ │ Card │ │ Card ││ │ └──────────┘ └────────┘│ │ ┌──────────┐ ┌────────┐│ │ │ Card │ │ Card ││ │ └──────────┘ └────────┘│ │ ┌──────────┐ ┌────────┐│ │ │ Card │ │ Card ││ │ └──────────┘ └────────┘│ │ │ ├──────────────────────────┤ │ 🏠 Home │🎬 Videos│📷 Photos│🔖 Marks│ ← bottom tab bar (h-16) └──────────────────────────┘ ``` ### Mobile/Tablet — Hamburger Drawer Open ``` ┌──────────────────────────┐ │ ▶ NextAV ✕ │▒▒▒▒▒│ │────────────────────│▒▒▒▒▒│ │ 🏠 Home │▒▒▒▒▒│ │ 🎬 Videos │▒▒▒▒▒│ │ 📷 Photos │▒▒▒▒▒│ │ 🔖 Bookmarks │▒▒▒▒▒│ │ ✨ Surprise Me │▒▒▒▒▒│ │ ⚙ Settings │▒▒▒▒▒│ │────────────────────│▒▒▒▒▒│ │ ▸ Clusters (collapsed) │ │ ▸ Libraries (collapsed) │ │────────────────────│▒▒▒▒▒│ │ NextAV v1.0 │▒▒▒▒▒│ └──────────────────────────┘ ▲ drawer (w-72) ▲ backdrop Note: Clusters & Libraries are collapsed by default on mobile. User can expand them. ``` --- ## Implementation Priority | Priority | Task | Effort | |----------|------|--------| | P0 | Create `SidebarProvider` context | Small | | P0 | Create `MobileTopBar` component | Small | | P0 | Create `MobileBottomTabs` component (YouTube-style) | Medium | | P0 | Refactor `sidebar.tsx` for desktop/mobile dual mode | Medium | | P0 | Update `layout.tsx` to integrate all pieces | Small | | P0 | Add CSS animations for drawer + safe-area support | Small | | P1 | Increase touch targets on mobile nav items & drawer | Small | | P1 | Reduce content padding on mobile (`p-6` → `p-3`) | Small | | P2 | Swipe gesture to open/close drawer | Medium | --- ## Resolved Decisions | # | Question | Decision | |---|----------|----------| | 1 | Bottom Tab Bar vs Hamburger Drawer? | **YouTube-style bottom tab bar** for primary nav (Home, Videos, Photos, Bookmarks). Hamburger drawer retained for secondary nav (Surprise Me, Settings, Clusters, Libraries). | | 2 | Breakpoint Selection | **`lg` (1024px)** — tablets in portrait mode get the mobile experience with bottom tab bar + drawer. | | 3 | Sidebar Sections on Mobile | **Collapsed by default** — Clusters and Libraries sections start collapsed in the mobile drawer to reduce scroll length. Users can expand them manually. |