Dashboard Components

Authenticated dashboard shell with sidebar navigation.

The dashboard uses a fixed sidebar layout with mobile slide-in support and next-auth session integration.

Sidebar

Responsive dashboard sidebar with app logo from config.name, 4 navigation links (Dashboard, Profile, Billing, Settings) with Lucide icons and active state highlighting (violet gradient), user avatar/name/email section, Sign Out button via next-auth/react. Full mobile support with slide-in sidebar and backdrop overlay.

components/dashboard/Sidebar.tsx

Navigation Links

RouteLabelIcon
/dashboardDashboardLayoutDashboard
/dashboard/profileProfileUser
/dashboard/billingBillingCreditCard
/dashboard/settingsSettingsSettings

Features

  • •Active state: Violet gradient background on the current route link
  • •Mobile: Slide-in sidebar with backdrop overlay, triggered by hamburger menu
  • •User section: Avatar with initials, name, email from session
  • •Sign Out: Uses signOut() from next-auth/react