feat: update admin pages to display "Hello world!" and enhance layout with dynamic titles and dividers

src/app/admin/classes/page.tsx

@@ -5,5 +5,5 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Classes</p>;
+	return <p>Hello world!</p>;
 }

src/app/admin/layout.tsx

@@ -1,10 +1,41 @@
+"use client";
 import { Sidebar } from "@/app/components/Sidebar";
+import { Divider } from "@nextui-org/react";
+import { usePathname } 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";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+	const pathName = usePathname();
+
+	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 />
-			<main>{children}</main>
+			<Sidebar items={sidebarItems} />
+			<main className="p-7 w-full">
+				<h1 className="text-2xl font-semibold">
+					{
+						sidebarItems
+							.flat()
+							.find((item) => item.href === pathName)?.title
+					}
+				</h1>
+
+				<Divider className="mt-2 mb-5 bg-foreground-300" />
+
+				{children}
+			</main>
 		</div>
 	);
 }

src/app/admin/page.tsx

@@ -5,5 +5,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Admin Home</p>;
+	return (
+		<p>Hello world!</p>
+	);
 }

src/app/admin/rooms/page.tsx

@@ -5,5 +5,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Rooms</p>;
+	return (
+		<p>Hello world!</p>
+	);
 }

src/app/admin/settings/page.tsx

@@ -5,5 +5,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Settings</p>;
+	return (
+		<p>Hello world!</p>
+	);
 }

src/app/admin/users/page.tsx

@@ -6,9 +6,5 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return (
-		<div className="p-4">
-			<UserList />
-		</div>
-	);
+	return <UserList />;
 }

src/app/components/Sidebar/index.tsx

@@ -1,77 +1,65 @@
 "use client";
 
 import { Divider, Link } from "@nextui-org/react";
-import { 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 { usePathname, useRouter } from "next/navigation";
 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">
-			<div className="flex flex-col w-64 gap-2 h-full px-3 py-4 overflow-y-auto bg-foreground-100">
-				<ul className="font-medium gap-2">
-					<li>
-						<Link
-							className="flex justify-center p-2 text-gray-900 dark:text-white rounded-lg cursor-pointer"
-							onPress={() => router.push("/")}
-						>
-							Toogether
-						</Link>
-					</li>
-				</ul>
+			<div className="flex flex-col w-72 gap-5 h-full px-3 py-4 overflow-y-auto bg-foreground-100">
+				<div className="flex flex-col gap-2 p-2">
+					<Link
+						className="flex text-2xl font-semibold text-gray-900 dark:text-white rounded-lg cursor-pointer"
+						onPress={() => router.push("/")}
+					>
+						Toogether
+					</Link>
+					<p className="text-sm text-foreground-400 dark:text-gray-400">
+						Manage classes, rooms, and users
+					</p>
+				</div>
 
-				<section className="flex flex-col">
-					<ul className="flex flex-col gap-2">
-						<li className="hover:bg-foreground-300 rounded-md cursor-pointer">
-							<SidebarItem
-								href="/admin"
-								title="Dashboard"
-								icon={<IoMdStats />}
-							/>
-						</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>
+				{items.map((group, index) => (
+					<div key={index}>
+						<section className="flex flex-col">
+							<ul className="flex flex-col gap-2">
+								{group.map((item, index) => (
+									<li
+										key={index}
+										className={`${
+											pathName === item.href
+												? "bg-foreground-300"
+												: "hover:bg-foreground-200"
+										} rounded-md cursor-pointer`}
+									>
+										<SidebarItem
+											href={item.href}
+											title={item.title}
+											icon={item.icon}
+										/>
+									</li>
+								))}
+							</ul>
+						</section>
 
-				<Divider className="bg-foreground-300 my-4" />
-
-				<section className="flex flex-col">
-					<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>
+						{index < items.length - 1 && (
+							<Divider className="bg-foreground-300 mt-4" />
+						)}
+					</div>
+				))}
 
 				<section className="mt-auto flex justify-between">
 					<ThemeSwitcher />

src/app/components/Sidebar/item.tsx

@@ -17,9 +17,9 @@ export const SidebarItem = ({
 		<Link
 			onPress={() => router.push(href)}
 			color="foreground"
-			className="w-full px-2 py-1 gap-2 text-xl"
+			className="w-full p-2 gap-3 text-md"
 		>
-			{icon}
+			<span className="text-xl">{icon}</span>
 			{title}
 		</Link>
 	);