Navigation & App Shell
Director nav, tab bar, side panel, app shell structure. TRD-02-001. Weeks 5–6.
Tasks & Deliverables
- Director-style hub navigation (People Hub, Build Hub)→ scroll
components/destiny/destiny-director-nav.tsx
- Tab bar (Destiny style)→ scroll
components/destiny/destiny-tab-bar.tsx
- Side panel navigation→ scroll
components/destiny/destiny-side-panel.tsx
- Breadcrumb, Back button (Ghost style)→ scroll
components/destiny/destiny-breadcrumbs.tsx, destiny-back-button.tsx
- Mobile navigation drawer→ scroll
components/destiny/destiny-mobile-drawer.tsx
Output: components/destiny/* (DirectorNav, TabBar, SidePanel, Breadcrumbs, BackButton, MobileDrawer)
Live Examples
3.1.1 Director-style hub navigation
3.1.2 Tab bar (Destiny style)
3.1.3 Side panel navigation
3.1.4 Breadcrumb & Back button
3.1.5 Mobile navigation drawer
3.2.1–3.2.3 Persistent shell, Top nav, Side panel
Full app shell is live on Home, People Hub, Build Hub.
3.2.2 Top nav bar
See live app (Home, People Hub, Build Hub) or mini preview above.
3.2.3 Director side panel
Inline preview in 3.1.3; full shell on app routes.
3.2.4 Wallet nav (connect/disconnect, balance)
Disconnected
Connected
3.2.5 Auth-aware display
Wallet nav toggles between "Connect Wallet" and address+balance when connected. Try on Home.
3.2.6 Responsive (hamburger/drawer on mobile)
Resize to <768px or use device emulation — hamburger icon opens DestinyMobileDrawer. Same drawer as 3.1.5.