search fixed after refresh page

src/components/Home.jsx

@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
-import { useEffect, useState } from 'react';
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
 
 export default function Home() {
   const [showText, setShowText] = useState(false);
@@ -59,7 +59,8 @@ export default function Home() {
         </h2>
         <p className="text-lg w-4/5 text-[#858585]">
           Explore our vast collection of web development resources, designed to
-          give you the knowledge and tools you need to succeed in the world of web development!
+          give you the knowledge and tools you need to succeed in the world of
+          web development!
         </p>
       </motion.div>
     </div>

src/components/nav/SideNav.jsx

@@ -1,13 +1,20 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import NavItem from "./NavItem";
 import { AiOutlineSearch } from "react-icons/ai";
 import SideNavMobile from "./SideNavMobile";
 
 function SideNav() {
   const [showSideNav, setShowSideNav] = useState(false);
-  const [searchResult,setSearchResult] = useState("");
+  const [searchResult, setSearchResult] = useState("");
   let debounceTimer;
 
+  const search = new URLSearchParams(window.location.search).get("search");
+
+  useEffect(() => {
+    if (search) {
+      setSearchResult(search);
+    }
+  }, []);
 
   const clickHandler = () => {
     setShowSideNav(!showSideNav);
@@ -22,31 +29,36 @@ function SideNav() {
   const debounce = (func, delay) => {
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(func, delay);
-  };  
+  };
 
   return (
     <>
       <div
-        className=" flex flex-col fixed h-full py-2 px-4 text-lg w-52  gap-20 bg-gradient-to-b from-[#3f454a] to-[#1a1d20]
-      text-[#cacaca] hidden lg:block "
+        className=" flex flex-col fixed h-full  py-2 px-4 text-lg w-52  gap-20 bg-gradient-to-b from-[#3f454a] to-[#1a1d20]
+      text-[#cacaca]  lg:block "
       >
-        <div className="search flex items-center gap-4 bg-[#2E2D2D] rounded-2xl px-2 py-[4px] mt-12">
+        <div className="search flex items-center gap-4 bg-[#2E2D2D]  bg-red-500 rounded-2xl px-2 py-[4px] mt-12">
           <AiOutlineSearch />
           <input
-          onChange={(e)=>debounce(() => handleInputChange(e), 1500)}
-            style={{ background: "transparent", outline: "none",width:"100%" }}
+            onChange={(e) => debounce(() => handleInputChange(e), 1500)}
+            defaultValue={searchResult}
+            style={{
+              background: "transparent",
+              outline: "none",
+              width: "100%",
+            }}
             placeholder="search..."
           ></input>
         </div>
 
         {/* nav */}
         <div className="flex flex-col p-2 mt-24  gap-6 ">
-          <NavItem searchResult={searchResult}/>
+          <NavItem searchResult={searchResult} />
         </div>
       </div>
 
       {!showSideNav ? (
-        <div className="absolute z-10 block lg:hidden h-fit  p-[8px] py-[1px] cursor-pointer rounded-xl ml-4 mt-4 bg-[#242B2E]" >
+        <div className="absolute z-10 block lg:hidden h-fit  p-[8px] py-[1px] cursor-pointer rounded-xl ml-4 mt-4 bg-[#242B2E]">
           <i
             onClick={clickHandler}
             className="fa-solid fa-bars p-4 text-2xl text-[#fff]"

src/components/websites/Index.jsx

@@ -6,7 +6,7 @@ import css from "../../database/websites/css.json";
 import js from "../../database/websites/javascript.json";
 import react from "../../database/websites/reactjs.json";
 import tailwind from "../../database/websites/tailwindcss.json";
-import nextjs from '../../database/websites/nextjs.json';
+import nextjs from "../../database/websites/nextjs.json";
 import { useLocation } from "react-router-dom";
 
 const Index = () => {
@@ -28,7 +28,7 @@ const Index = () => {
       setData([...tailwind]);
     } else if (filter === "nextjs") {
       setData([...nextjs]);
-    }  else {
+    } else {
       setData([]); // Set empty array if no matching filter is found
     }
   }, [filter]);
@@ -46,8 +46,7 @@ const Index = () => {
       return `${item.title.toLowerCase()}`.includes(searchItem.toLowerCase());
     });
     setSearchData(value);
-  }, [searchItem,data]
-  )
+  }, [searchItem, data]);
 
   return (
     <div className="m-8 mt-32 lg:mt-8">