handle active list header links

components/layout/StLayout.js

@@ -2,7 +2,7 @@ import { getStateInfo } from "@/lib/getStateInfo";
 import Footer from "./footer";
 import Header from "./header";
 
-function StLayout({ children }) {
+function StLayout({ children, name }) {
     const { matchedCity } = getStateInfo();
 
     return (
@@ -10,7 +10,7 @@ function StLayout({ children }) {
             <main className="w-full min-h-screen">
                 <header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
                     <div className="w-full padding-responsive">
-                        <Header matchedCity={matchedCity} />
+                        <Header matchedCity={matchedCity} name={name} />
                     </div>
                 </header>
                 <section

components/layout/header/list/Row.js

@@ -10,13 +10,12 @@ function Row({ name }) {
           <Link
             href={nav.link}
             className={`
-                            ${
-                              isActiveURL(nav.link.replace("/", ""), name)
-                                ? "!text-[#526CAC]"
-                                : "text-[#525252]"
-                            }
-                            text-[16px] font-medium
-                        `}
+              ${nav.link === name
+                ? "!text-[#526CAC]"
+                : "text-[#525252]"
+              }
+              text-[16px] font-medium
+            `}
           >
             {nav.name}
           </Link>