feat: update Sidebar component layout and styling for improved user experience

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}>

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>
 	);