Resolved the problem for switching between the dark and light mode for the tools, prompts, datasets. (#62)

Author: the-shivam-gupta

components/NavigationLinks.tsx

@@ -1,41 +1,90 @@
-'use client'
+"use client";
 import React, { useState } from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 export default function NavigationLinks() {
+  const [activeSection, setActiveSection] = useState("");
+
+  const handleSectionClick = (section) => {
+    setActiveSection(section);
+  };
+
   const isMobile = useMediaQuery("(max-width: 600px)");
 
   const linkVariant = {
     hover: {
       scale: isMobile ? 1.1 : 1.02,
       transition: {
         duration: 0.3,
-        yoyo: Infinity
-      }
-    }
-  }
+        yoyo: Infinity,
+      },
+    },
+  };
 
   const handleToolsClick = () => {
     document.title = "AI Fusion - Tools";
-  }
+  };
 
   const handlePromptsClick = () => {
     document.title = "AI Fusion - Prompts";
-  }
+  };
 
   const handleDatasetsClick = () => {
     document.title = "AI Fusion - Datasets";
-  }
+  };
 
   return (
-    <motion.div className='flex text-[--dark-bg] bg-[--light-bg] dark:bg-[--dark-bg] dark:text-[--light-bg] flex-col items-center justify-between ' whileHover='hover' variants={linkVariant}>
+    <motion.div
+      className="flex text-[--dark-bg] bg-[--light-bg] dark:bg-[--dark-bg] dark:text-[--light-bg] flex-col items-center justify-between "
+      whileHover="hover"
+      variants={linkVariant}
+    >
       <div className="w-50 border border-[--dark-bg] dark:border-[--light-bg] rounded-3xl flex flex-row justify-evenly items-center">
-        <Link className="w-24 text-center font-semibold hover:bg-[color:var(--primary-color)] hover:text-[--dark-bg] focus:bg-[--primary-color] rounded-l-3xl transition px-4 py-2" href={"/tools"} onClick={handleToolsClick}>Tools</Link>
-        <Link className="w-24 text-center font-semibold hover:bg-[color:var(--primary-color)] hover:text-[--dark-bg] focus:bg-[--primary-color] transition px-4 py-2" href={"/prompts"} onClick={handlePromptsClick}>Prompts</Link>
-        <Link className="w-24 text-center font-semibold hover:bg-[color:var(--primary-color)] hover:text-[--dark-bg] focus:bg-[--primary-color] rounded-r-3xl transition px-4 py-2" href={"/datasets"} onClick={handleDatasetsClick}>Datasets</Link>
+        <Link
+          className={`w-24 text-center font-semibold ${
+            activeSection === "tools"
+              ? "bg-green-500 text-white"
+              : "hover:bg-[color:var(--primary-color)] hover:text-white focus:bg-[--primary-color]"
+          } rounded-l-3xl transition px-4 py-2`}
+          href="/tools"
+          onClick={() => {
+            handleSectionClick("tools");
+            handleToolsClick();
+          }}
+        >
+          Tools
+        </Link>
+        <Link
+          className={`w-24 text-center font-semibold ${
+            activeSection === "prompts"
+              ? "bg-green-500 text-white"
+              : "hover:bg-[color:var(--primary-color)] hover:text-white focus:bg-[--primary-color]"
+          } transition px-4 py-2`}
+          href="/prompts"
+          onClick={() => {
+            handleSectionClick("prompts");
+            handlePromptsClick();
+          }}
+        >
+          Prompts
+        </Link>
+        <Link
+          className={`w-24 text-center font-semibold ${
+            activeSection === "datasets"
+              ? "bg-green-500 text-white"
+              : "hover:bg-[color:var(--primary-color)] hover:text-white focus:bg-[--primary-color]"
+          } rounded-r-3xl transition px-4 py-2`}
+          href="/datasets"
+          onClick={() => {
+            handleSectionClick("datasets");
+            handleDatasetsClick();
+          }}
+        >
+          Datasets
+        </Link>
       </div>
     </motion.div>
-  )
+  );
 }