92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
import { Link, useLocation } from 'react-router-dom';
|
|
import {
|
|
LayoutDashboard,
|
|
Settings2,
|
|
RefreshCcw,
|
|
Users,
|
|
Shield,
|
|
Settings,
|
|
History,
|
|
LogOut,
|
|
HelpCircle,
|
|
Plane
|
|
} from 'lucide-react';
|
|
|
|
const NAV_ITEMS = [
|
|
{ label: 'Dashboard', path: '/', icon: LayoutDashboard },
|
|
{ label: 'Simulation Engine', path: '/simulation', icon: Settings2 },
|
|
{ label: 'Recovery Incidents', path: '/recovery', icon: RefreshCcw },
|
|
{ label: 'Cohort Management', path: '/cohorts', icon: Users },
|
|
{ label: 'Policy Engine', path: '/policy', icon: Shield },
|
|
{ label: 'Configuration', path: '/config', icon: Settings },
|
|
{ label: 'Audit Logs', path: '/audit', icon: History },
|
|
];
|
|
|
|
export default function AppSidebar() {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<div className="w-64 h-screen flex flex-col bg-[#F3F6F5] border-r border-gray-200">
|
|
<div className="p-6 flex items-center gap-3">
|
|
<div className="bg-gray-800 p-2 rounded-lg text-white">
|
|
<Plane size={24} />
|
|
</div>
|
|
<span className="text-xl font-bold text-gray-800">Aero Resolve</span>
|
|
</div>
|
|
|
|
<div className="px-6 py-2">
|
|
<div className="flex items-center justify-between text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
|
|
<span>Global Terminal</span>
|
|
<span className="px-2 py-0.5 rounded-full bg-green-100 text-green-700 border border-green-200">Active</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto">
|
|
{NAV_ITEMS.map((item) => {
|
|
const isActive = location.pathname === item.path || (item.path !== '/' && location.pathname.startsWith(item.path));
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-[#1B9869] text-white shadow-sm'
|
|
: 'text-gray-700 hover:bg-white hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<Icon size={18} className={isActive ? 'text-white' : 'text-gray-500'} />
|
|
{item.label}
|
|
{item.label === 'Recovery Incidents' && (
|
|
<div className="ml-auto w-2 h-2 rounded-full bg-green-500" />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-gray-200">
|
|
<button className="flex items-center gap-3 px-4 py-2 w-full text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors">
|
|
<LogOut size={18} />
|
|
Sign Out
|
|
</button>
|
|
<button className="flex items-center gap-3 px-4 py-2 w-full text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors mt-1">
|
|
<HelpCircle size={18} className="text-gray-500" />
|
|
Help center
|
|
</button>
|
|
|
|
<div className="mt-4 p-3 bg-white rounded-xl shadow-sm border border-gray-100 flex items-center gap-3 cursor-pointer">
|
|
<div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-sm">
|
|
AD
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-bold text-gray-900">Admin Demo</span>
|
|
<span className="text-xs text-gray-500">System Administrator</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|