234156feed
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>
76 lines
2.2 KiB
CSS
76 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--sidebar: 0 0% 100%;
|
|
--sidebar-foreground: 222.2 84% 4.9%;
|
|
--sidebar-primary: 222.2 47.4% 11.2%;
|
|
--sidebar-primary-foreground: 210 40% 98%;
|
|
--sidebar-accent: 210 40% 96.1%;
|
|
--sidebar-accent-foreground: 222.2 47.4% 11.2%;
|
|
--sidebar-border: 214.3 31.8% 91.4%;
|
|
--sidebar-ring: 222.2 84% 4.9%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
--sidebar: 217.2 32.6% 17.5%;
|
|
--sidebar-foreground: 210 40% 98%;
|
|
--sidebar-primary: 210 40% 98%;
|
|
--sidebar-primary-foreground: 222.2 47.4% 11.2%;
|
|
--sidebar-accent: 217.2 32.6% 17.5%;
|
|
--sidebar-accent-foreground: 210 40% 98%;
|
|
--sidebar-border: 217.2 32.6% 17.5%;
|
|
--sidebar-ring: 212.7 26.8% 83.9%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|