src/app/admin/classes/page.tsx

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

src/app/admin/layout.tsx

@@ -1,41 +1,10 @@
-"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 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>
+			<Sidebar />
+			<main>{children}</main>
 		</div>
 	);
 }

src/app/admin/page.tsx

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

src/app/admin/rooms/page.tsx

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

src/app/admin/settings/page.tsx

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

src/app/admin/users/page.tsx

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

src/app/components/Sidebar/index.tsx

@@ -1,65 +1,77 @@
 "use client";
 
 import { Divider, Link } from "@nextui-org/react";
-import { usePathname, useRouter } from "next/navigation";
+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 { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 import { SidebarItem } from "./item";
 
-export const Sidebar = ({
-	items,
-}: {
-	items: {
-		href: string;
-		title: string;
-		icon: React.ReactNode;
-	}[][];
-}) => {
+export const Sidebar = () => {
 	const router = useRouter();
-	const pathName = usePathname();
 
 	return (
 		<aside className="h-screen">
-			<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>
+			<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>
 
-				{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>
+				<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>
 
-						{index < items.length - 1 && (
-							<Divider className="bg-foreground-300 mt-4" />
-						)}
-					</div>
-				))}
+				<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>
 
 				<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 p-2 gap-3 text-md"
+			className="w-full px-2 py-1 gap-2 text-xl"
 		>
-			<span className="text-xl">{icon}</span>
+			{icon}
 			{title}
 		</Link>
 	);