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> |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .env.example | ||
| .gitignore | ||
| components.json | ||
| Dockerfile | ||
| next.config.mjs | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| tailwind.config.ts | ||
| tsconfig.json | ||