gg-backend/frontend/src/components/layout/Sidebar.tsx

import {Link, useLocation} from "react-router-dom";

import {Button} from "@/components/ui/button";
import {Separator} from "@/components/ui/separator";

export default function Sidebar() {
	const location = useLocation();

	const navItems = [
		{
			name: "Department",
			path: "/department",
		},
		{
			name: "Doctor",
			path: "/doctor",
		},
		{
			name: "Appointments",
			path: "/appointment",
		},
		{
			name: "Blog",
			path: "/blog",
		},
	];

	return (
		<div className="w-64 border-r bg-card">
			<div className="p-6">
				<h2 className="text-xl font-bold">GG Dashboard</h2>
			</div>

			<Separator />

			<nav className="p-4 space-y-2">
				{navItems.map((item) => {
					const active = location.pathname === item.path;

					return (
						<Link key={item.path} to={item.path}>
							<Button
								variant={active ? "secondary" : "ghost"}
								className="w-full justify-start"
							>
								{item.name}
							</Button>
						</Link>
					);
				})}
			</nav>
		</div>
	);
}