Added tag support + Post link and many more changes and optimizations.

components/Navbar.tsx

@@ -1,11 +1,59 @@
 import { signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import useCollectionSlice from "@/store/collection";
+import { Collection } from "@prisma/client";
+import ClickAwayHandler from "./ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import AddLinkModal from "./AddLinkModal";
+
+export default function () {
+  const router = useRouter();
+  const collectionId = router.query.id;
+
+  const { collections } = useCollectionSlice();
+
+  const activeCollection: Collection | undefined = collections.find(
+    (e) => e.id.toString() == collectionId
+  );
+
+  const [collectionInput, setCollectionInput] = useState(false);
+
+  const toggleCollectionInput = () => {
+    setCollectionInput(!collectionInput);
+  };
 
-export default function Navbar() {
   return (
-    <div className="flex justify-between p-5 border-solid border-b-sky-100 border border-l-white">
-      <p>Navbar</p>
-      <div onClick={() => signOut()} className="cursor-pointer w-max">
-        Sign Out
+    <div className="flex justify-between items-center p-5 border-solid border-b-sky-100 border border-l-white">
+      <p>{activeCollection?.name}</p>
+      <div className="flex items-center gap-3">
+        <FontAwesomeIcon
+          icon={faPlus}
+          onClick={toggleCollectionInput}
+          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+        />
+        <FontAwesomeIcon
+          icon={faMagnifyingGlass}
+          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+        />
+        <div
+          onClick={() => signOut()}
+          className="cursor-pointer w-max text-sky-900"
+        >
+          Sign Out
+        </div>
+
+        {collectionInput ? (
+          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center">
+            <ClickAwayHandler
+              onClickOutside={toggleCollectionInput}
+              className="w-fit mx-auto"
+            >
+              <AddLinkModal />
+            </ClickAwayHandler>
+          </div>
+        ) : null}
       </div>
     </div>
   );