Sidebar Navigation
Full-height collapsible sidebar for application layouts. Supports dark and light modes, icon-only collapse, profile badge footer, and an optional AI chat history panel. The sidebar powering this test app is a live instance of this component.
Dark sidebar
Default appearance. Click the double-chevron at the bottom of the header zone to collapse the sidebar to icon-only mode. Labels fade with a smooth CSS transition. Hover over icons in collapsed mode to see tooltips.
Active items highlight in bright green. Disabled items are dimmed. Badge counts appear on the right of labels and reduce to the icon tooltip in collapsed mode.
Light sidebar
White background with midnight text and gray borders. Suitable for customer-facing portals and apps with a lighter visual identity.
Light sidebar with white background and midnight text. Section labels, active states, and hover effects all adapt to the light theme automatically.
Sidebar with chat history
Enable ShowChatHistory for AI agent pages where the user manages multiple
conversations. Use the search box to filter by name. Each conversation name is editable
inline — click the pencil icon that appears on hover. The chat panel collapses away in
icon-only mode.
Active: API integration questions
Click a conversation in the sidebar to select it. Hover over a conversation and click the pencil icon to rename it inline.
Profile fly-up menu
Click the profile row at the bottom left — a menu panel animates up above the trigger, anchored to the footer. The chevron rotates to indicate open/close state. Clicking outside or pressing a menu item closes the panel.
The menu appears above the profile trigger and closes when you click the backdrop, press a menu item, or collapse the sidebar. The chevron rotates to signal open/close state.