Integrate shadcn sidebar component into dashboard layout: - Create new dashboard/layout.tsx with SidebarProvider and responsive design - Add AppSidebar component with navigation items (Dashboard, Settings, Admin) - Implement responsive sidebar (permanent on desktop, drawer on mobile) - Add Settings page with user profile information - Update dashboard page to remove old header and integrate with new layout - Configure Tailwind CSS colors for sidebar theming - Add components.json for shadcn configuration Features: - Desktop sidebar is permanent and collapsible - Mobile sidebar opens as overlay/drawer - Active route highlighting in navigation - User profile display with email and role - Logout button in sidebar footer - Conditional Admin link (only for admin users) - Settings page showing account information Files created: - src/components/ui/sidebar.tsx (shadcn sidebar primitives) - src/components/app-sidebar.tsx (main sidebar component) - src/app/dashboard/layout.tsx (layout wrapper) - src/app/dashboard/settings/page.tsx (settings page) - components.json (shadcn configuration) Files modified: - tailwind.config.ts (added sidebar color scheme) - src/app/globals.css (added sidebar CSS variables) - src/app/dashboard/page.tsx (refactored to work with layout) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
12 lines
219 B
JSON
12 lines
219 B
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema.json",
|
|
"style": "default",
|
|
"rsc": false,
|
|
"tsx": true,
|
|
"baseColor": "slate",
|
|
"aliases": {
|
|
"components": "./src/components",
|
|
"utils": "./src/lib/utils"
|
|
}
|
|
}
|