feat: add department dashboard

frontend/src/components/layout/Sidebar.tsx

@@ -1,17 +1,50 @@
-import {Link} from "react-router-dom";
+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: "Blog",
+			path: "/blog",
+		},
+		{
+			name: "Subjects",
+			path: "/subjects",
+		},
+	];
+
 	return (
-		<div className="w-[220px] h-screen border-r bg-white p-4">
-			<h2 className="text-lg font-semibold mb-6">Admin</h2>
-
-			<div className="space-y-3">
-				<Link to="/dashboard">Dashboard</Link>
-
-				<Link to="/blog">Blog</Link>
-
-				<Link to="/department">Department</Link>
+		<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>
 	);
 }