1.3 KiB
2026-02-28 Session Notes
Docs Sidebar Navigation Redesign Plan
Designed a comprehensive redesign of the Signet website's docs sidebar to replace its flat, always-expanded layout of ~40 links with a clean, collapsible React component using shadcn/ui primitives. The current sidebar is hard to scan due to tiny section labels, no collapse functionality, and a hard border-right divider.
Key Design Decisions
The new sidebar removes the border-right divider entirely, allowing the sidebar to share the same visual space as content with hierarchy differentiation alone. Only the section containing the current page opens by default; all others remain collapsed. Section headers increase from 9px to 11px and shift from muted to normal text color. Mobile navigation uses a Sheet component (off-canvas from left) below the 900px breakpoint, with DocSearch moved to the docs header for mobile accessibility.
Implementation Roadmap
Convert the Astro sidebar to a React component (DocsSidebar.tsx) using shadcn Collapsible for section expansion and Sheet for mobile. Requires installing two new shadcn components, updating four existing files (Sidebar.astro wrapper, docs.css, Docs.astro), and running verification tests across desktop and mobile breakpoints. The implementation follows a six-step order with clear test criteria.