CogniSyncSide nav
A vertical navigation rail for moving between sections. It supports icons, grouped links, count badges, collapsible groups, indented submenus, and optional sort for long lists.
How to customize
Navigation content (labels, hrefs, Lucide icons, badge counts, which sections are collapsible / sortable) is defined in src/components/ds/doc-side-nav-sections.ts. Add a new object to docSideNavSections or extend an existing items array, then ensure the route exists under src/app/.
Presentation (spacing, selected #F1F5F9, hover #F8FAFC, submenu guide line) is implemented in side-nav-rail.tsx. The documentation app wraps that rail with a mobile drawer and sticky aside in side-nav.tsx.
Appearance in the shell
240px width, logo, search placeholder, and full section list — including this Side nav entry under Components.
This preview mirrors the documentation sidebar. Open the Components group to see Side nav in the list with the panel icon; the row uses the same styles as every other doc link.
Building blocks
Collapsible section header: icon, label, optional sort control, chevron (right = collapsed, down = open).
Leaf link with optional badge (dark pill, 12px medium).