85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
/**
|
||
* ════════════════════════════════════════════════════════════
|
||
* مُصادَق (Musadaq) — Premium Dark Sidebar
|
||
* ════════════════════════════════════════════════════════════
|
||
*/
|
||
|
||
import { NavLink, useNavigate } from 'react-router-dom';
|
||
import {
|
||
LayoutDashboard,
|
||
FileText,
|
||
Building2,
|
||
Users,
|
||
Settings,
|
||
LogOut,
|
||
Crown
|
||
} from 'lucide-react';
|
||
import { useAuthStore } from '../../store/authStore';
|
||
|
||
const menuItems = [
|
||
{ icon: LayoutDashboard, label: 'الرئيسية', path: '/dashboard' },
|
||
{ icon: Crown, label: 'لوحة النخبة', path: '/elite-dashboard' },
|
||
{ icon: FileText, label: 'الفواتير', path: '/invoices' },
|
||
{ icon: Building2, label: 'الشركات', path: '/companies' },
|
||
{ icon: Users, label: 'الموظفون', path: '/staff' },
|
||
{ icon: Settings, label: 'الإعدادات', path: '/settings' },
|
||
];
|
||
|
||
export const Sidebar = () => {
|
||
const navigate = useNavigate();
|
||
const clearAuth = useAuthStore((state) => state.clearAuth);
|
||
|
||
const handleLogout = () => {
|
||
clearAuth();
|
||
navigate('/login');
|
||
};
|
||
|
||
return (
|
||
<aside className="w-64 h-screen bg-slate-950 border-l border-slate-800/60 sticky top-0 flex flex-col p-4">
|
||
{/* Brand */}
|
||
<div className="flex items-center gap-3 px-2 py-6">
|
||
<div className="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20">
|
||
<FileText className="text-white w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-xl font-bold text-white">
|
||
مُصادَق
|
||
</h1>
|
||
<p className="text-[10px] text-slate-500 font-medium tracking-wider">ELITE ACCOUNTANT HUB</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation */}
|
||
<nav className="flex-1 mt-4 space-y-1">
|
||
{menuItems.map((item) => (
|
||
<NavLink
|
||
key={item.path}
|
||
to={item.path}
|
||
className={({ isActive }) =>
|
||
`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
|
||
isActive
|
||
? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
|
||
: 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200 border border-transparent'
|
||
}`
|
||
}
|
||
>
|
||
<item.icon className="w-5 h-5" />
|
||
<span className="font-medium">{item.label}</span>
|
||
</NavLink>
|
||
))}
|
||
</nav>
|
||
|
||
{/* Logout */}
|
||
<div className="pt-4 border-t border-slate-800/60">
|
||
<button
|
||
onClick={handleLogout}
|
||
className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-400 hover:bg-red-500/10 transition-all group border border-transparent hover:border-red-500/20"
|
||
>
|
||
<LogOut className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
|
||
<span className="font-medium">تسجيل الخروج</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
);
|
||
};
|