| import React from 'react'; |
| import { NavLink, useLocation } from 'react-router-dom'; |
| import { |
| LayoutDashboard, |
| CheckSquare, |
| Folder, |
| BarChart3, |
| FileText, |
| Settings, |
| Users, |
| Calendar, |
| MessageSquare, |
| ChevronLeft, |
| ChevronRight |
| } from 'lucide-react'; |
| import { useAuth } from '../hooks/useAuth'; |
|
|
| const Sidebar = ({ isOpen, onToggle }) => { |
| const { user } = useAuth(); |
| const location = useLocation(); |
|
|
| const menuItems = [ |
| { |
| path: `/${user?.role}`, |
| label: 'Dashboard', |
| icon: LayoutDashboard, |
| roles: ['admin', 'manager', 'employee'] |
| }, |
| { |
| path: '/tasks', |
| label: 'Tasks', |
| icon: CheckSquare, |
| roles: ['admin', 'manager', 'employee'] |
| }, |
| { |
| path: '/documents', |
| label: 'Documents', |
| icon: Folder, |
| roles: ['admin', 'manager', 'employee'] |
| }, |
| { |
| path: '/analytics', |
| label: 'Analytics', |
| icon: BarChart3, |
| roles: ['admin', 'manager'] |
| }, |
| { |
| path: '/reports', |
| label: 'Reports', |
| icon: FileText, |
| roles: ['admin', 'manager'] |
| }, |
| { |
| path: '/users', |
| label: 'Users', |
| icon: Users, |
| roles: ['admin'] |
| }, |
| { |
| path: '/calendar', |
| label: 'Calendar', |
| icon: Calendar, |
| roles: ['admin', 'manager', 'employee'] |
| }, |
| { |
| path: '/messages', |
| label: 'Messages', |
| icon: MessageSquare, |
| roles: ['admin', 'manager', 'employee'] |
| }, |
| { |
| path: '/settings', |
| label: 'Settings', |
| icon: Settings, |
| roles: ['admin', 'manager', 'employee'] |
| }, |
| ]; |
|
|
| const filteredMenuItems = menuItems.filter(item => |
| item.roles.includes(user?.role) |
| ); |
|
|
| return ( |
| <aside className={`fixed left-0 top-0 h-full bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-all duration-300 z-40 ${ |
| isOpen ? 'w-64' : 'w-16' |
| }`}> |
| <div className="p-4 border-b border-gray-200 dark:border-gray-700"> |
| <div className="flex items-center justify-between"> |
| {isOpen && ( |
| <div className="flex items-center gap-2"> |
| <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"> |
| <LayoutDashboard className="w-5 h-5 text-white" /> |
| </div> |
| <span className="font-bold text-lg">TaskFlow Pro</span> |
| </div> |
| )} |
| |
| <button |
| onClick={onToggle} |
| className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" |
| > |
| {isOpen ? ( |
| <ChevronLeft className="w-5 h-5 text-gray-600 dark:text-gray-400" /> |
| ) : ( |
| <ChevronRight className="w-5 h-5 text-gray-600 dark:text-gray-400" /> |
| )} |
| </button> |
| </div> |
| </div> |
| |
| <nav className="p-4"> |
| <ul className="space-y-2"> |
| {filteredMenuItems.map((item) => { |
| const Icon = item.icon; |
| const isActive = location.pathname === item.path; |
| |
| return ( |
| <li key={item.path}> |
| <NavLink |
| to={item.path} |
| className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${ |
| isActive |
| ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' |
| : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700' |
| }`} |
| > |
| <Icon className="w-5 h-5 flex-shrink-0" /> |
| {isOpen && ( |
| <span className="text-sm font-medium">{item.label}</span> |
| )} |
| </NavLink> |
| </li> |
| ); |
| })} |
| </ul> |
| </nav> |
| |
| {isOpen && ( |
| <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700"> |
| <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-4 text-white"> |
| <h3 className="font-semibold text-sm mb-1">Pro Tip</h3> |
| <p className="text-xs opacity-90"> |
| Use keyboard shortcuts to navigate faster. Press Ctrl+K to open search. |
| </p> |
| </div> |
| </div> |
| )} |
| </aside> |
| ); |
| }; |
|
|
| export default Sidebar; |
