Many improvements.

components/Sidebar/SidebarItem.tsx

@@ -1,26 +1,21 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Collection } from "@prisma/client";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { MouseEventHandler } from "react";
-
-interface TextObject {
-  name: string;
-}
+import Link from "next/link";
 
 interface SidebarItemProps {
-  item: Collection | TextObject;
+  text: string;
   icon: IconProp;
-  onClick?: MouseEventHandler;
+  path: string;
 }
 
-export default function ({ item, icon, onClick }: SidebarItemProps) {
+export default function ({ text, icon, path }: SidebarItemProps) {
   return (
-    <div
-      onClick={onClick}
-      className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
-    >
-      <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
-      <p>{item.name}</p>
-    </div>
+    <Link href={path}>
+      <div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
+        <p>{text}</p>
+      </div>
+    </Link>
   );
 }