feat: enhance sidebar component with dynamic item rendering and improved layout

src/app/admin/layout.tsx

@@ -1,9 +1,23 @@
 import { Sidebar } from "@/app/components/Sidebar";
+import { FaDoorClosed, FaRegUser } from "react-icons/fa";
+import { FiSettings } from "react-icons/fi";
+import { IoMdStats } from "react-icons/io";
+import { MdInbox } from "react-icons/md";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+	const sidebarItems = [
+		[
+			{ href: "/admin", title: "Dashboard", icon: <IoMdStats /> },
+			{ href: "/admin/users", title: "Users", icon: <FaRegUser /> },
+			{ href: "/admin/classes", title: "Classes", icon: <MdInbox /> },
+			{ href: "/admin/rooms", title: "Rooms", icon: <FaDoorClosed /> },
+		],
+		[{ href: "/admin/settings", title: "Settings", icon: <FiSettings /> }],
+	];
+
 	return (
 		<div className="flex">
-			<Sidebar />
+			<Sidebar items={sidebarItems} />
 			<main>{children}</main>
 		</div>
 	);

src/app/components/Sidebar/index.tsx

@@ -1,16 +1,21 @@
 "use client";
 
 import { Divider, Link } from "@nextui-org/react";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
-import { FaDoorClosed, FaRegUser } from "react-icons/fa";
-import { FiSettings } from "react-icons/fi";
-import { IoMdStats } from "react-icons/io";
-import { MdInbox } from "react-icons/md";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 import { SidebarItem } from "./item";
 
-export const Sidebar = () => {
+export const Sidebar = ({
+	items,
+}: {
+	items: {
+		href: string;
+		title: string;
+		icon: React.ReactNode;
+	}[][];
+}) => {
 	const router = useRouter();
+	const pathName = usePathname();
 
 	return (
 		<aside className="h-screen">
@@ -26,52 +31,34 @@ export const Sidebar = () => {
 					</li>
 				</ul>
 
+				{items.map((group, index) => (
+					<div key={index}>
 						<section className="flex flex-col">
 							<ul className="flex flex-col gap-2">
-						<li className="hover:bg-foreground-300 rounded-md cursor-pointer">
+								{group.map((item, index) => (
+									<li
+										key={index}
+										className={`${
+											pathName === item.href
+												? "bg-foreground-300"
+												: "hover:bg-foreground-200"
+										} rounded-md cursor-pointer`}
+									>
 										<SidebarItem
-								href="/admin"
+											href={item.href}
-								title="Dashboard"
+											title={item.title}
-								icon={<IoMdStats />}
+											icon={item.icon}
-							/>
-						</li>
-						<li className="hover:bg-foreground-300 rounded-md cursor-pointer">
-							<SidebarItem
-								href="/admin/users"
-								title="Users"
-								icon={<FaRegUser />}
-							/>
-						</li>
-						<li className="hover:bg-foreground-300 rounded-md cursor-pointer">
-							<SidebarItem
-								href="/admin/classes"
-								title="Classes"
-								icon={<MdInbox />}
-							/>
-						</li>
-						<li className="hover:bg-foreground-300 rounded-md cursor-pointer">
-							<SidebarItem
-								href="/admin/rooms"
-								title="Rooms"
-								icon={<FaDoorClosed />}
 										/>
 									</li>
+								))}
 							</ul>
 						</section>
 
+						{index < items.length - 1 && (
 							<Divider className="bg-foreground-300 my-4" />
-
+						)}
-				<section className="flex flex-col">
+					</div>
-					<ul className="flex flex-col gap-2">
+				))}
-						<li className="hover:bg-foreground-300 rounded-md cursor-pointer">
-							<SidebarItem
-								href="/admin/settings"
-								title="Settings"
-								icon={<FiSettings />}
-							/>
-						</li>
-					</ul>
-				</section>
 
 				<section className="mt-auto flex justify-between">
 					<ThemeSwitcher />