File size: 4,375 Bytes
ffb4c35 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | 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; |