Dark Cover when scrolled down

src/routes/index.js

@@ -17,46 +17,51 @@ import BlogSingle from "../component/Blog/BlogSingle/Main";
 import Terms from "../component/Terms/Main";
 import Privacy from "../component/Privacy/Main";
 
+/**
+ * Renders the appropriate component based on the current URL path.
+ * Manages the state of the navbar and footer components based on the current path.
+ * @returns {JSX.Element} The rendered components based on the current URL path.
+ */
 const Routing = () => {
-  const [homepage, sethomepage] = useState(false);
+  const [homepage, setHomepage] = useState(false);
+  const [footerpage, setFooterpage] = useState(false);
+  const [footer, setFooter] = useState({ f1: true });
+  const [navbar, setNavbar] = useState({ n1: true });
+  const [brdcum, setBrdcum] = useState({ n1: true });
   const location = useLocation();
 
   useEffect(() => {
     if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
-      sethomepage(false);
+      setHomepage(false);
     } else {
-      sethomepage(true);
+      setHomepage(true);
     }
   }, [location]);
 
-  const [footerpage, setfooterpage] = useState(false);
   useEffect(() => {
     if (location.pathname === "/sign-in" || location.pathname === "/sign-up") {
-      setfooterpage(false);
+      setFooterpage(false);
     } else {
-      setfooterpage(true);
+      setFooterpage(true);
     }
   }, [location]);
 
   useEffect(() => {
-    if (localStorage.getItem("navbar") === "darkhome") {
-      setfooter({ f2: true });
-      setnavbar({ n3: true });
-      setbrdcum({ b2: true });
-    } else if (localStorage.getItem("navbar") === "home") {
-      setfooter({ f1: true });
-      setnavbar({ n2: true });
-      setbrdcum({ b1: true });
+    const navbarValue = localStorage.getItem("navbar");
+    if (navbarValue === "darkhome") {
+      setFooter({ f2: true });
+      setNavbar({ n3: true });
+      setBrdcum({ b2: true });
+    } else if (navbarValue === "home") {
+      setFooter({ f1: true });
+      setNavbar({ n2: true });
+      setBrdcum({ b1: true });
     } else {
-      setfooter({ f1: true });
-      setnavbar({ n2: true });
+      setFooter({ f1: true });
+      setNavbar({ n2: true });
     }
   }, []);
 
-  const [footer, setfooter] = useState({ f1: true });
-  const [navbar, setnavbar] = useState({ n1: true });
-  const [brdcum, setbrdcum] = useState({ n1: true });
-
   return (
     <>
       {homepage && <Navbar navbar={navbar} />}
@@ -65,19 +70,19 @@ const Routing = () => {
           path="/"
           element={
             <Home
-              setfooter={setfooter}
-              setnavbar={setnavbar}
-              setbrdcum={setbrdcum}
+              setfooter={setFooter}
+              setnavbar={setNavbar}
+              setbrdcum={setBrdcum}
             />
           }
         />
         <Route
           path="/about"
-          element={<AboutUs setnavbar={setnavbar} brdcum={brdcum} />}
+          element={<AboutUs setnavbar={setNavbar} brdcum={brdcum} />}
         />
         <Route
           path="/review"
-          element={<Review setnavbar={setnavbar} brdcum={brdcum} />}
+          element={<Review setnavbar={setNavbar} brdcum={brdcum} />}
         />
         <Route path="/contact" element={<Contact brdcum={brdcum} />} />
         <Route path="/faq" element={<Faq brdcum={brdcum} />} />
@@ -88,7 +93,6 @@ const Routing = () => {
         <Route path="/blogdetails/:id" element={<BlogSingle brdcum={brdcum} />} />
         <Route path="/terms" element={<Terms brdcum={brdcum} />} />
         <Route path="/privacy" element={<Privacy brdcum={brdcum} />} />
-
       </Routes>
       {footerpage && <Footer footer={footer} />}
     </>