---
id: "2115821027683148036"
source: https://x.com/_heyrico/status/2115821027683148036
author: "rico (@_heyrico)"
media: "photo, 2800x3490 (first of 3 media items)"
model: claude-opus-5-5
generated: 2026-10-31
---
# Three-State App Sidebar with Workspace Switcher

## Summary
A light, airy sidebar shown in three states side by side: a collapsed icon rail, the full expanded panel, and the expanded panel with its workspace switcher dropdown open. It is a tidy study in calm hierarchy, with one icon family, generous row height, muted section labels and a single blue unread dot doing all the signalling.

## Style
- Theme: light
- Mood: calm, tidy, soft, modern, minimal
- Tags: sidebar, navigation, workspace-switcher, dropdown-menu, segmented-control, icon-rail, line-icons
- Category: Navigation, Components

## Palette
| Role | Hex |
|---|---|
| Canvas | #EEEEEE |
| Panel | #FBFBFB |
| Segment track | #F3F2F2 |
| Divider | #E4E4E4 |
| Muted text | #B2B3AD |
| Icon gray | #787876 |
| Unread dot | #1E7CF2 |
| Logo lime | #9BC53D |

## Typography
- Nav items and workspace name: neo-grotesk sans, regular (400), sentence case, about 2% of the canvas height (roughly 16px in a real UI). Closest free font: Inter 400.
- Section labels (Projects, Chat): same sans, regular, lighter gray (#9A9A96), slightly smaller.
- Segmented control labels: Inter 500, active label dark, inactive gray.
- Recent chat titles: dark primary line, a second muted line, both truncated with an ellipsis.

## Layout
- Portrait 4:5 canvas on #EEEEEE with three panels top aligned about 11% from the top.
- Collapsed rail about 64px wide; expanded panel about 280px; the third panel is cropped by the right edge.
- Panels: radius about 12px, 1px #E4E4E4 border, no visible shadow; internal padding 20px.
- Row height about 36px with 12px icon-to-label gap; groups separated by 32px.
- Dropdown: radius 12px, white, soft shadow (0 8px 24px rgba(0,0,0,0.08)), 1px dividers between groups.

## Elements
- Workspace switcher: 20px rounded-square logo (a placeholder lime spiral mark), name, up-down chevron; hover state gets a #F0F0F0 pill.
- Header icons: search and sidebar-toggle, 20px line icons.
- Segmented control: track #F3F2F2, active white pill with a hairline shadow, labels Home and Activity.
- Nav list: plus-circle, table, document, bar chart, bolt, and dots icons with labels (Agent, Sheets, Documents, Analytics, Skills, More).
- Projects: folder icons with two project names.
- Chat: two recent threads, the first with an 8px blue unread dot on the right.
- Footer: a plus button left and a half-filled circle theme toggle right.
- Dropdown: five workspace rows with colored square placeholder logos, then Invite members, Support, Integrations and Sign out, each with a line icon.

## Motion
Static image. Idea: animate the rail-to-panel expansion by width with labels fading in 40ms apart, and open the switcher with a 180ms scale-from-top (0.96 to 1) plus fade.

## Rebuild it
1. Sidebar as a Motion `aside` with `animate={{ width: collapsed ? 64 : 280 }}` and a spring (stiffness 400, damping 40); labels are `motion.span` with opacity tied to the state.
2. Panel styles: `bg-[#FBFBFB] border border-[#E4E4E4] rounded-xl p-5`; rows `h-9 flex items-center gap-3 text-[15px] text-neutral-700 rounded-lg hover:bg-black/[0.03]`.
3. Segmented control: `bg-[#F3F2F2] p-1 rounded-lg`, active item with a shared `layoutId` pill so it slides between tabs.
4. Switcher: a Radix-style popover, `origin-top`, enter animation `scale 0.96 to 1, opacity 0 to 1, 180ms ease-out`.
5. Use one line icon set at 1.5px stroke (Lucide works) and keep every icon 20px.
6. Truncate chat titles with `truncate` and place the unread dot with `ml-auto size-2 rounded-full bg-[#1E7CF2]`.

## Generation prompt
A clean light-gray product UI mockup showing three versions of an app sidebar side by side: a narrow icon-only rail, an expanded sidebar with a workspace name, a Home and Activity segmented toggle, navigation items with thin line icons, project folders and recent chats with a small blue unread dot, and a third panel with a workspace switcher dropdown open listing colorful square app icons and account actions; soft rounded corners, hairline borders, minimal and calm, no real brand logos.