feat: add admin pages for classes, rooms, settings, and users with updated layout and sidebar navigation

src/app/admin/classes/page.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Classes | Toogether",
+};
+
+export default async function Page() {
+	return <p>Classes</p>;
+}

src/app/admin/layout.tsx

@@ -2,7 +2,7 @@ import { Sidebar } from "@/app/components/Sidebar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
-		<div>
+		<div className="flex">
 			<Sidebar />
 			<main>{children}</main>
 		</div>

src/app/admin/page.tsx

@@ -1,10 +1,9 @@
 import { Metadata } from "next";
-import { Sidebar } from "../components/Sidebar";
 
 export const metadata: Metadata = {
-	title: "Toogether Admin",
+	title: "Admin | Toogether",
 };
 
-export default async function AdminPage() {
-	return <Sidebar />;
+export default async function Page() {
+	return <p>Admin Home</p>;
 }

src/app/admin/rooms/page.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Rooms | Toogether",
+};
+
+export default async function Page() {
+	return <p>Rooms</p>;
+}

src/app/admin/settings/page.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Settings | Toogether",
+};
+
+export default async function Page() {
+	return <p>Settings</p>;
+}

src/app/admin/users/page.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Users | Toogether",
+};
+
+export default async function Page() {
+	return <p>Users</p>;
+}

src/app/components/Header/contents.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useClassStore } from "@/app/stores/classStore";
+import { useUserStore } from "@/app/stores/userStore";
 import { User } from "@/app/types/next-auth";
 import { getInitials } from "@/app/utils/initial";
 import {
@@ -18,8 +20,6 @@ import {
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
-import { useUserStore } from "@/app/stores/userStore";
-import { useClassStore } from "@/app/stores/classStore";
 
 export const HeaderContent = ({ user }: { user?: User }) => {
 	const router = useRouter();

src/app/components/Room/Card.tsx

@@ -70,11 +70,9 @@ export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => {
 			{moment(date).dayOfYear() === moment().dayOfYear() && (
 				<div className="flex p-2">
 					<Button
-						isDisabled={
-							moment(moment(Times[0].startTime).subtract(5, "minutes")).isAfter(
-								moment(),
-							)
-						}
+						isDisabled={moment(
+							moment(Times[0].startTime).subtract(5, "minutes"),
+						).isAfter(moment())}
 						color="primary"
 						radius="full"
 						size="sm"

src/app/components/Room/List.tsx

@@ -47,11 +47,14 @@ export const RoomList = ({ rooms }: { rooms: Room[] | null }) => {
 		};
 	}, []);
 
-	if (rooms?.length == 0) return (
-		<div className="flex gap-2 rounded-xl bg-default-100 p-4">
-			<p className="text-default-500 text-center w-full">No rooms found</p>
-		</div>
-	)
+	if (rooms?.length == 0)
+		return (
+			<div className="flex gap-2 rounded-xl bg-default-100 p-4">
+				<p className="text-default-500 text-center w-full">
+					No rooms found
+				</p>
+			</div>
+		);
 
 	return (
 		<ul

src/app/components/Sidebar/index.tsx

@@ -1,17 +1,20 @@
 "use client";
 
-import { FaRegUser } from "react-icons/fa";
+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 { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 import { SidebarItem } from "./item";
-import { Link } from "@nextui-org/react";
-import { useRouter } from "next/navigation";
 
 export const Sidebar = () => {
 	const router = useRouter();
 
 	return (
-		<aside className="fixed top-0 left-0 w-64 h-screen">
-			<div className="flex flex-col gap-2 h-full px-3 py-4 overflow-y-auto bg-foreground-100">
+		<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
@@ -22,8 +25,16 @@ export const Sidebar = () => {
 						</Link>
 					</li>
 				</ul>
-				<section className="flex flex-col gap-2">
-					<ul>
+
+				<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"
@@ -31,8 +42,37 @@ export const Sidebar = () => {
 								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>
+
+				<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 />
 				</section>

src/app/components/Sidebar/item.tsx

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

src/app/dashboard/page.tsx

@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 		"Toogether is a platform that allows you to create and join rooms to study together.",
 };
 
-export default async function HomePage() {
+export default async function Page() {
 	return (
 		<div className="flex flex-col gap-8 p-4">
 			<RoomTable />

src/app/page.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 		"Toogether is a platform that allows you to create and join rooms to study together.",
 };
 
-export default async function HomePage() {
+export default async function Page() {
 	return (
 		<>
 			<Header />