Navigation & Layout
GospeLib's navigation adapts to each platform while maintaining a consistent information architecture. Four navigation modes serve different display contexts, and a flexible panel system provides contextual information alongside the reader.
Navigation Modes
| Mode | Platform | Primary Nav | Secondary Nav |
|---|---|---|---|
| A — Bottom Tab | Phone (portrait) | 5-icon tab bar at bottom | Stack navigation within each tab |
| B — Side Tab | Tablet (portrait) | Compact icon rail on left | Contextual panel on right |
| C — Side Rail | Tablet (landscape) + Web | Icon + label rail on left | Persistent side panel on right |
| D — Full Desktop | Web (wide viewport) | Full sidebar with sections | Multi-panel layout |
Tab Bar Items (Mode A)
| Position | Icon | Label | Destination |
|---|---|---|---|
| 1 | 📖 reader | Read | Scripture reader |
| 2 | ✳ explore | Explore | Knowledge graph + discovery |
| 3 | ✎ study | Study | Journal, collections, schedules |
| 4 | 🔍 search | Search | Command palette (focused mode) |
| 5 | 👤 profile | Me | Settings, account, preferences |
Side Rail Items (Modes B/C/D)
Same items as the tab bar plus additional entries for wider viewports:
| Icon | Label | Added In |
|---|---|---|
| 📋 | Reading List | Mode C+ |
| 📅 | Study Plan | Mode C+ |
| ⚙ | Settings | Mode D |
Screen Hierarchy
Phone
Tab Bar → Stack Navigator
Read → Book Picker → Chapter → Verse Reader
Explore → Graph View → Node Detail
Study → Journal / Collections / Schedules
Search → Results → Passage
Me → Settings / Account / Premium
Bottom sheets overlay the current stack for contextual panels (cross-references, lexicon, notes).
Tablet
Side Rail (persistent) + Content Area + Optional Context Panel
Content fills center
Context panel slides in from right (notes, cross-refs, commentary)
Web
Side Rail/Sidebar + Content Area + Context Panel (persistent or toggleable)
Wide: three-column layout (rail + reader + panel)
Narrow: collapses to tablet-like layout
Contextual Panel System
The contextual panel provides supplementary information alongside the reader. It progresses through six states:
| State | Visual | Trigger |
|---|---|---|
| Hidden | No panel visible | Default reading mode (phone) |
| Peek | Small handle visible at edge | One-finger swipe from right edge |
| Half | Panel covers 40% of screen width | Continue swipe or tap panel handle |
| Full | Panel covers 80% of screen | Continue swipe or expand gesture |
| Sheet (phone only) | Bottom sheet covering 60% of screen | Phone: replaces side panel |
| Detached (desktop) | Floating window | Drag panel away from edge |
Panel Content Types
| Content | Source | Trigger |
|---|---|---|
| Cross-references | Verse swipe or graph link | Swipe left on verse |
| Lexicon | Word tap in lens/interlinear mode | Tap "See full entry" in bubble |
| Notes | Study mode or margin indicator | Tap pencil icon |
| Commentary | Available for select passages | Toggle in study toolbar |
| Footnotes | Footnote tap in mode C/D | Tap footnote indicator |
| AI Assistant | Command palette or study toolbar | Invoke AI action |
Panel Transitions
| Transition | Duration | Easing |
|---|---|---|
| Hidden → Peek | 160ms | decelerate |
| Peek → Half | 220ms | smoothInOut |
| Half → Full | 220ms | smoothInOut |
| Any → Hidden | 200ms | accelerate |
| Phone: Hidden → Sheet | 280ms | decelerate |
Reader Chrome Behavior
Navigation chrome (top bar, tab bar, tool strip) adapts to reading state:
| Mode | Behavior | Platform Default |
|---|---|---|
| Summon | Chrome hidden. Tap top/bottom safe area to reveal. | — |
| Auto-hide | Chrome visible initially, hides after 3s of reading. | Phone |
| Scroll-reveal | Chrome appears on scroll-up, hides on scroll-down. | Tablet |
| Study mode | Chrome always visible — tools needed continuously. | Web, or when study mode active |
Chrome Elements
| Element | Position | Content |
|---|---|---|
| Top bar | Top | Book/chapter title, view mode toggle, study mode toggle |
| Tool strip | Below top bar (study mode) | Highlight, note, bookmark, share, layout mode |
| Tab bar | Bottom (phone) | 5 navigation tabs |
| Quick settings | Bottom-right floating | Font size, density, verse mode |
| Status indicators | Top-right | Sync status, offline indicator |
Responsive Breakpoints
| Breakpoint | Width | Layout Mode |
|---|---|---|
| Phone | < 768px | Bottom tab + stack navigation |
| Tablet portrait | 768px–1024px | Side tab + optional panel |
| Tablet landscape | 1024px–1280px | Side rail + panel |
| Desktop | > 1280px | Full sidebar + persistent panel |
Content area max-width remains 680px for optimal reading line length regardless of viewport width. Excess space goes to margins and panels.
Related Pages
- Reader Experience — chrome behavior and study mode
- Platforms — per-platform navigation details
- Motion & Haptics — panel transition animations
- Accessibility — keyboard navigation and screen reader support