many breaking changes/fixes

components/Sidebar/index.tsx

@@ -1,37 +1,25 @@
-import { useSession } from "next-auth/react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { useState } from "react";
 import useCollectionStore from "@/store/collections";
-import { signOut } from "next-auth/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faPlus,
-  faChevronDown,
   faFolder,
   faBox,
   faHashtag,
   faBookmark,
-  faCircleUser,
-  faSliders,
-  faArrowRightFromBracket,
 } from "@fortawesome/free-solid-svg-icons";
 import SidebarItem from "./SidebarItem";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
-import Dropdown from "@/components/Dropdown";
 
 export default function () {
-  const { data: session } = useSession();
-
   const [collectionInput, setCollectionInput] = useState(false);
-  const [profileDropdown, setProfileDropdown] = useState(false);
 
   const { collections, addCollection } = useCollectionStore();
 
   const { tags } = useTagStore();
 
-  const user = session?.user;
-
   const toggleCollectionInput = () => {
     setCollectionInput(!collectionInput);
   };
@@ -48,48 +36,12 @@ export default function () {
   };
 
   return (
-    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-2 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
-      <div className="relative w-fit">
-        <div
-          className="flex gap-2 items-center mb-5 p-2 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded-md duration-100"
-          onClick={() => setProfileDropdown(!profileDropdown)}
-          id="profile-dropdown"
-        >
-          <FontAwesomeIcon
-            icon={faCircleUser}
-            className="h-5 pointer-events-none"
-          />
-          <div className="flex items-center gap-1 pointer-events-none">
-            <p className="font-bold">{user?.name}</p>
-            <FontAwesomeIcon icon={faChevronDown} className="h-3" />
-          </div>
-        </div>
-        {profileDropdown ? (
-          <Dropdown
-            items={[
-              {
-                name: "Settings",
-                icon: <FontAwesomeIcon icon={faSliders} />,
-              },
-              {
-                name: "Logout",
-                icon: <FontAwesomeIcon icon={faArrowRightFromBracket} />,
-                onClick: () => {
-                  signOut();
-                  setProfileDropdown(!profileDropdown);
-                },
-              },
-            ]}
-            onClickOutside={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              if (target.id !== "profile-dropdown") setProfileDropdown(false);
-            }}
-            className="absolute top-10 left-0"
-          />
-        ) : null}
-      </div>
+    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-2 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-20">
+      <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
+        Linkwarden
+      </p>
 
-      <Link href="links">
+      <Link href="/links">
         <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
           <FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
           <p>All Links</p>
@@ -119,12 +71,13 @@ export default function () {
             />
           </ClickAwayHandler>
         ) : (
-          <FontAwesomeIcon
-            icon={faPlus}
-            onClick={toggleCollectionInput}
+          <div
             title="Add Collection"
-            className="select-none text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1 w-3"
-          />
+            onClick={toggleCollectionInput}
+            className="select-none text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
+          >
+            <FontAwesomeIcon icon={faPlus} className="h-3 w-3" />
+          </div>
         )}
       </div>
       <div>