Sidebar
A fixed sidebar composer with header, navigation, recent activity, and footer — decoupled from app data and animation context.
Sidebar is a fully composed sidebar that combines SidebarHeader, SidebarNavigation, RecentActivity, SidebarFooter, and a ThemeAwareToaster. It is fixed-position on the right side on md+ screens and fades/blurs in when animateOnReveal is true. All data is passed via props — no app-level context required.
Installation
npx shadcn@latest add @adv/sidebarThis will also install its registry dependencies: @adv/sidebar-header, @adv/sidebar-navigation, @adv/recent-activity, @adv/sidebar-footer, and @adv/theme-aware-toaster.
Usage
import { Sidebar } from '@/components/sidebar';
const activities = [
{ id: '1', title: 'Shipped new feature', time: '2 hours ago' },
{ id: '2', title: 'Updated design tokens', time: 'Yesterday' },
];
const navItems = [
{ id: 'home', label: 'Home' },
{ id: 'work', label: 'Work' },
{ id: 'feeds', label: 'Feeds' },
{ id: 'how-i-ai', label: 'How I AI', type: 'route', href: '/how-i-ai', badge: 'new' },
];
<Sidebar
activities={activities}
navItems={navItems}
scrollSections={['home', 'work', 'feeds']}
animateOnReveal={false}
showActivityToasts={false}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
animateOnReveal | boolean | false | When true, the sidebar blurs in from 0 opacity on mount. |
activities | Activity[] | — | Activities forwarded to RecentActivity. |
navItems | NavItem[] | Default 5 nav items | Navigation items forwarded to SidebarNavigation. |
scrollSections | string[] | ["home","work","feeds"] | Section IDs to watch for scroll-based active highlighting. |
showActivityToasts | boolean | false | When true, fires a sonner toast for each activity on mount. |