many changes across the app

components/Sidebar/SidebarItem.tsx

@@ -4,7 +4,8 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import Link from "next/link";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
 interface SidebarItemProps {
   text: string;
@@ -13,13 +14,25 @@ interface SidebarItemProps {
 }
 
 export default function ({ text, icon, path }: SidebarItemProps) {
+  const router = useRouter();
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    if (router.asPath === path) setActive(true);
+    else setActive(false);
+  }, [router]);
+
   return (
     <Link href={path}>
-      <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
+      <div
+        className={`${
+          active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
+        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+      >
         {React.cloneElement(icon, {
-          className: "w-4 text-sky-300",
+          className: `w-4 ${active ? "text-white" : "text-sky-300"}`,
         })}
-        <p className="text-sky-900">{text}</p>
+        <p className={`${active ? "text-white" : "text-sky-900"}`}>{text}</p>
       </div>
     </Link>
   );

components/Sidebar/index.tsx

@@ -14,12 +14,21 @@ import {
 import SidebarItem from "./SidebarItem";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 export default function () {
   const { collections } = useCollectionStore();
-
   const { tags } = useTagStore();
 
+  const router = useRouter();
+
+  const [active, setActive] = useState("");
+
+  useEffect(() => {
+    setActive(router.asPath);
+  }, [router]);
+
   return (
     <div className="bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20">
       <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
@@ -27,16 +36,48 @@ export default function () {
       </p>
 
       <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>
+        <div
+          className={`${
+            active === "/links"
+              ? "bg-sky-500"
+              : "hover:bg-gray-50 hover:outline bg-gray-100"
+          } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+        >
+          <FontAwesomeIcon
+            icon={faBookmark}
+            className={`w-4 ${
+              active === "/links" ? "text-white" : "text-sky-300"
+            }`}
+          />
+          <p
+            className={`${active === "/links" ? "text-white" : "text-sky-900"}`}
+          >
+            All Links
+          </p>
         </div>
       </Link>
 
       <Link href="/collections">
-        <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={faBox} className="w-4 text-sky-300" />
-          <p>All Collections</p>
+        <div
+          className={`${
+            active === "/collections"
+              ? "bg-sky-500"
+              : "hover:bg-gray-50 hover:outline bg-gray-100"
+          } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+        >
+          <FontAwesomeIcon
+            icon={faBox}
+            className={`w-4 ${
+              active === "/collections" ? "text-white" : "text-sky-300"
+            }`}
+          />
+          <p
+            className={`${
+              active === "/collections" ? "text-white" : "text-sky-900"
+            }`}
+          >
+            All Collections
+          </p>
         </div>
       </Link>