Many improvements.

components/Navbar.tsx

@@ -1,22 +1,63 @@
 import { signOut } from "next-auth/react";
 import { useRouter } from "next/router";
-import useCollectionSlice from "@/store/collection";
-import { Collection } from "@prisma/client";
+import useCollectionSlice from "@/store/collections";
+import { Collection, Tag } 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 {
+  faPlus,
+  faFolder,
+  faBox,
+  faTag,
+  faBookmark,
+  faMagnifyingGlass,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+import { useEffect, useState } from "react";
 import AddLinkModal from "./AddLinkModal";
+import useTagSlice from "@/store/tags";
 
 export default function () {
   const router = useRouter();
-  const collectionId = router.query.id;
+  const [pageName, setPageName] = useState<string | null>("");
+  const [pageIcon, setPageIcon] = useState<IconDefinition | null>(null);
 
   const { collections } = useCollectionSlice();
+  const { tags } = useTagSlice();
 
-  const activeCollection: Collection | undefined = collections.find(
-    (e) => e.id.toString() == collectionId
-  );
+  useEffect(() => {
+    if (router.route === "/collections/[id]") {
+      const collectionId = router.query.id;
+
+      const activeCollection: Collection | undefined = collections.find(
+        (e) => e.id.toString() == collectionId
+      );
+
+      if (activeCollection) {
+        setPageName(activeCollection?.name);
+      }
+
+      setPageIcon(faFolder);
+    } else if (router.route === "/tags/[id]") {
+      const tagId = router.query.id;
+
+      const activeTag: Tag | undefined = tags.find(
+        (e) => e.id.toString() == tagId
+      );
+
+      if (activeTag) {
+        setPageName(activeTag?.name);
+      }
+
+      setPageIcon(faTag);
+    } else if (router.route === "/collections") {
+      setPageName("All Collections");
+      setPageIcon(faBox);
+    } else if (router.route === "/links") {
+      setPageName("All Links");
+      setPageIcon(faBookmark);
+    }
+  }, [router, collections, tags]);
 
   const [collectionInput, setCollectionInput] = useState(false);
 
@@ -26,7 +67,12 @@ export default function () {
 
   return (
     <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="text-sky-900 rounded my-1 flex items-center gap-2 font-bold">
+        {pageIcon ? (
+          <FontAwesomeIcon icon={pageIcon} className="w-4 text-sky-300" />
+        ) : null}
+        <p>{pageName}</p>
+      </div>
       <div className="flex items-center gap-3">
         <FontAwesomeIcon
           icon={faPlus}
@@ -45,7 +91,7 @@ export default function () {
         </div>
 
         {collectionInput ? (
-          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center">
+          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in">
             <ClickAwayHandler
               onClickOutside={toggleCollectionInput}
               className="w-fit mx-auto"