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: "Career",
			path: "/career",
		},
		{
			name: "Candidates",
			path: "/candidate",
		},
		{
			name: "Inquiry",
			path: "/inquiry",
		},
		{
			name: "Academics & Research",
			path: "/academics",
		},
		{
			name: "News & Media",
			path: "/news",
		},
		{
			name: "Email",
			path: "/email",
		},
		{
			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>
	);
}