Back to App UI
Sidebar Nav
The app-shell sidebar — workspace switcher, grouped scrollable links with a collapsible sub-group, and a user card — that collapses to a 64px icon rail. Icons stay pinned to the pixel, labels fade, and hover tooltips take over once the text is gone.
App UIsidebarnavigationapp-shellcollapsibletooltip
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react, next/image
Overview
Anatomy
Switcher header → scrollable grouped nav → collapse row → user card
Collapse
288px→64px width; labels fade by opacity, icons move zero px
Rail tooltips
One repositioned element, outside both overflow clips
Active item
One bg-accent row — the same token Command Palette uses