mirror of
https://github.com/block/goose.git
synced 2026-07-17 12:56:20 +02:00
Spence
9.2 KiB
9.2 KiB
Navigation Styles Visual Guide
Settings UI
Navigation Style Selector
Located in: Settings > App > Navigation Style
┌─────────────────────────────────────────────┐
│ Navigation Style │
│ Choose between expanded tiles or condensed │
│ rows │
├─────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ [GRID] │ │ [ROWS] │ │
│ │ │ │ │ │
│ │ Expanded │ │ Condensed │ │
│ │ Large tiles │ │ Compact rows│ │
│ │ with details│ │ │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────────┘
Expanded Style (Existing)
Top Position
┌─────────────────────────────────────────────────────────────┐
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ Home │ │ Chat │ │History │ │Recipes │ │ Clock │ │
│ │ 2:30PM │ │ 3 today│ │ 42 tot │ │ 8 │ │ [⌚] │ │
│ │ 🏠 │ │ 💬 │ │ 📜 │ │ 📄 │ │ │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │
└─────────────────────────────────────────────────────────────┘
│ │
│ Main Content Area │
│ │
Left Position
┌──────────┬────────────────────────────────────────┐
│ ┌──────┐ │ │
│ │ Home │ │ │
│ │ 2:30 │ │ │
│ │ 🏠 │ │ │
│ └──────┘ │ │
│ ┌──────┐ │ │
│ │ Chat │ │ Main Content Area │
│ │ 3 │ │ │
│ │ 💬 │ │ │
│ └──────┘ │ │
│ ┌──────┐ │ │
│ │Histor│ │ │
│ │ 42 │ │ │
│ │ 📜 │ │ │
│ └──────┘ │ │
└──────────┴────────────────────────────────────────┘
Condensed Style (New)
Top Position
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🏠 Home 2:30PM │ 💬 Chat 3 │ 📜 History 42 │ 📄 Recipes 8│ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│ │
│ Main Content Area │
│ │
Left Position
┌──────────────┬──────────────────────────────────────┐
│ 🏠 Home 2:30 │ │
│ 💬 Chat 3 │ │
│ 📜 History 42│ Main Content Area │
│ 📄 Recipes 8 │ │
│ 🧩 Ext. 5/12 │ │
│ ⚙️ Settings │ │
└──────────────┴──────────────────────────────────────┘
Bottom Position
│ │
│ Main Content Area │
│ │
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🏠 Home 2:30PM │ 💬 Chat 3 │ 📜 History 42 │ 📄 Recipes 8│ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Right Position
┌──────────────────────────────────────┬──────────────┐
│ │ 🏠 Home 2:30 │
│ │ 💬 Chat 3 │
│ Main Content Area │ 📜 History 42│
│ │ 📄 Recipes 8 │
│ │ 🧩 Ext. 5/12 │
│ │ ⚙️ Settings │
└──────────────────────────────────────┴──────────────┘
Key Differences
| Feature | Expanded Style | Condensed Style |
|---|---|---|
| Layout | Grid of tiles | Single row/column |
| Size | Large (140px squares) | Compact (48px height) |
| Widgets | Included (clock, etc.) | Excluded |
| Information | Rich (tags, desc.) | Minimal (badge only) |
| Space Usage | More screen space | Less screen space |
| Visual Impact | High | Low |
| Best For | Discovery, overview | Quick navigation |
Drag & Drop
Both styles support drag-and-drop reordering:
Expanded
┌────────┐ ┌────────┐ ┌────────┐
│ Home │ --> │ Chat │ │History │
│ (drag) │ │ │ │ │
└────────┘ └────────┘ └────────┘
Condensed
│ 🏠 Home │ --> │ 💬 Chat │ │ 📜 History │
│ (drag) │ │ │ │ │
Animation
Both styles feature smooth spring animations:
- Expand/collapse: Spring animation (300ms stiffness, 30 damping)
- Item entrance: Staggered fade-in (30ms delay per item)
- Hover: Scale 1.02
- Tap: Scale 0.98
- Drag: Opacity 0.5, scale 0.95
Responsive Behavior
Expanded Style
- Small screens: 2 columns
- Medium screens: 3-4 columns
- Large screens: 6 columns
- Ultra-wide (2536px+): 12 columns
Condensed Style
- Horizontal: Scrollable row if needed
- Vertical: Scrollable column if needed
- Always maintains compact size