dragoon0x Sidebar & Panel Patterns
Sidebar Types
| Type | Purpose | Width |
|---|---|---|
| Navigation | Primary app navigation | 240-280px |
| Tool panel | Tools, properties, settings | 280-360px |
| Detail panel | Selected item details | 320-480px |
| Chat/activity | Conversations, activity feed | 320-400px |
Collapsible Sidebar
- Collapsed state: icons only (48-64px wide)
- Expanded state: icons + labels
- Toggle button always visible
- Remember preference (localStorage)
- On mobile: overlay with backdrop, swipe to dismiss
Detail Panel
- Opens from the right side
- Shows details of selected item from a list
- Doesn't navigate away from the list view
- Close button (X) in top-right
- Can resize (drag handle on the left edge)
Rules
- Left sidebar for navigation, right panel for details/properties
- Main content area is never less than 50% of the viewport
- Sidebar content scrolls independently from main content
- Pin important actions to the bottom of the sidebar (log out, settings)
- Responsive: Sidebar becomes an overlay on mobile, not a squeezed column