57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { usePathname, useRouter } from 'next/navigation';
|
||
|
|
import {
|
||
|
|
LayoutDashboard,
|
||
|
|
Users,
|
||
|
|
Calendar,
|
||
|
|
UserCog,
|
||
|
|
FlaskConical,
|
||
|
|
FileText,
|
||
|
|
CreditCard
|
||
|
|
} from 'lucide-react';
|
||
|
|
|
||
|
|
const menu = [
|
||
|
|
{ name: 'Today', path: '/today', icon: LayoutDashboard },
|
||
|
|
{ name: 'Patients', path: '/patients', icon: Users },
|
||
|
|
{ name: 'Appointments', path: '/appointments', icon: Calendar },
|
||
|
|
{ name: 'Staff Management', path: '/staff', icon: UserCog },
|
||
|
|
{ name: 'Lab Management', path: '/lab', icon: FlaskConical },
|
||
|
|
{ name: 'Billing', path: '/billing', icon: CreditCard },
|
||
|
|
{ name: 'Reports', path: '/reports', icon: FileText },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function Sidebar() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside className="w-64 bg-[#071a2f] text-white flex flex-col p-4">
|
||
|
|
<div className="mb-8">
|
||
|
|
<h1 className="text-xl font-bold">DyoLink</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="flex flex-col gap-2">
|
||
|
|
{menu.map((item) => {
|
||
|
|
const Icon = item.icon;
|
||
|
|
const isActive = pathname === item.path;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={item.name}
|
||
|
|
onClick={() => router.push(item.path)}
|
||
|
|
className={`flex items-center gap-3 p-3 rounded-lg transition ${
|
||
|
|
isActive
|
||
|
|
? 'bg-primary-600'
|
||
|
|
: 'hover:bg-white/10'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Icon className="w-5 h-5" />
|
||
|
|
<span>{item.name}</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|