From 3bb97abdf24355024049e5a53d3c863128ebbd0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi?= <PSNazert@gmail.com>
Date: Tue, 7 Jan 2025 12:21:19 +0100
Subject: [PATCH] feat: update Sidebar component layout and styling for
 improved user experience

---
 src/app/components/Sidebar/index.tsx | 23 ++++++++++++-----------
 src/app/components/Sidebar/item.tsx  |  4 ++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx
index 0ba1b94..b06204d 100644
--- a/src/app/components/Sidebar/index.tsx
+++ b/src/app/components/Sidebar/index.tsx
@@ -19,17 +19,18 @@ export const Sidebar = ({
 
 	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>
 
 				{items.map((group, index) => (
 					<div key={index}>
diff --git a/src/app/components/Sidebar/item.tsx b/src/app/components/Sidebar/item.tsx
index 6f5f066..295a396 100644
--- a/src/app/components/Sidebar/item.tsx
+++ b/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>
 	);