Design Systemv1.0COMPONENTS · SIDEBAR
DESCRIPTION
A sidebar is a secondary interface area that provides access to navigation, controls, or contextual information alongside the primary content.
PLAYGROUND MODE
A collapsible navigation panel built from two parts: a Header (title, collapse control, and description) and a Content list of items — each with its own size, state, and optional sub-items.
STRUCTURE
The Header carries the section title with a collapse control, and a short description below it. The Content underneath lists the navigable items — Item 2 here shows how sub-items expand underneath a parent when it has children.
COLLAPSED
When the whole Sidebar collapses down to icons, each item drops its text and chevron for a square icon-only button.
SIZE
Size scales the item's text and icons together — Small, Medium, and Large.
STATES
Active marks the current item with bold text against the canvas surface; Focused adds a soft ring for keyboard navigation; Disabled mutes the whole row. Hover on Default responds to a real pointer hover — the other states are forced here for illustration.
TOKENS & TYPOGRAPHY
COMPONENT STRUCTURE
The Figma source also shows this panel used over a dark background in a couple of full-page mockups — worth keeping in mind if the Sidebar ever needs an inverse color treatment, though that variant isn't built here yet.