Sidebar Navigation
Deep dive into the main sidebar component, branding, and item behaviors.
Interface parameters
Core configuration constants
Latest v2.0
High-fidelity interface
The sidebar maintains peak legibility across both themes using an adaptive color system.
Deep Dark
Crystal Light
Dashboard
Subscriptions
Customers
Billing & Invoice
Payments
Analytics
Documentation
Settings
Dashboard
Subscriptions
Customers
Billing & Invoice
Payments
Analytics
Documentation
Settings
Skeleton integration
Swipe to compare light vs dark loading patterns used for content placeholders.
Technical reference
Production ready sidebar configuration
src/components/dashboard/sidebar.tsx
const navItems = [
{ icon: LayoutDashboard, label: "Dashboard", href: "/dashboard" },
{ icon: FileText, label: "Subscriptions", href: "/dashboard/subscriptions" },
{ icon: Users, label: "Customers", href: "/dashboard/customers" },
{ icon: CreditCard, label: "Billing & Invoice", href: "/dashboard/billing" },
{ icon: Package, label: "Payments", href: "/dashboard/payments" },
{ icon: BarChart3, label: "Analytics", href: "/dashboard/analytics" },
{ icon: BookOpen, label: "Documentation", href: "/dashboard/documentation" },
{ icon: Settings, label: "Settings", href: "/dashboard/settings" }
];
// Dynamic active route logic
const isActive = pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href));Active state hub
Active items are highlighted using an inclusive matching strategy. If a sub-route is active, the parent item remains highlighted for visual context.
Responsive logic
The sidebar collapses into a hidden drawer on devices smaller than 992px, triggered by the global hamburger menu.