handle active list header links

app/about-us/page.js

@@ -3,7 +3,7 @@ import Layout from "@/components/layout/StLayout";
 
 function AboutUs() {
   return (
-    <Layout>
+    <Layout name='/about-us'>
       <AboutUsPage />
     </Layout>
   );

app/blogs/page.js

@@ -3,7 +3,7 @@ import Layout from "@/components/layout/StLayout";
 
 function Blogs() {
   return (
-    <Layout>
+    <Layout name='/blogs'>
       <BlogsPage />
     </Layout>
   );

app/clinics/page.js

@@ -3,7 +3,7 @@ import Layout from "@/components/layout/StLayout";
 
 function Clinics() {
   return (
-    <Layout>
+    <Layout name='/clinics'>
       <ClinicsPage />
     </Layout>
   );

app/contact-us/page.js

@@ -3,7 +3,7 @@ import Layout from "@/components/layout/StLayout";
 
 function ContactUs() {
   return (
-    <Layout title="تماس با ما" name="contact-us">
+    <Layout name="/contact-us">
       <ContactUsPage />
     </Layout>
   );

app/page.js

@@ -3,7 +3,7 @@ import Layout from "@/components/layout/StLayout";
 
 export default function Home() {
   return (
-    <Layout>
+    <Layout name='/'>
       <HomePage />
     </Layout>
   );

app/specialties/page.js

@@ -3,7 +3,7 @@ import SpecialtiesPage from "@/components/specialties";
 
 function Specialties() {
   return (
-    <Layout title="تخصص ها" name="specialties">
+    <Layout name="/specialties">
       <SpecialtiesPage />
     </Layout>
   );

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>

helper/index.js

@@ -6,15 +6,12 @@ export const numberToArStyle = (num) => num.toLocaleString("ar-AE");
 export const isActiveURL = (link, name) => link === name;
 
 export const convertToJalali = (date) => {
-  // Get the current Gregorian date
   const currentDate = date;
 
-  // Convert the Gregorian date to Jalali date
   const jalaliDate = moment(currentDate).format("jYYYY/jM/jD");
 
-  // Get Jalali year, month, and day
   const jalaliYear = moment(jalaliDate, "jYYYY/jM/jD").jYear();
-  const jalaliMonth = moment(jalaliDate, "jYYYY/jM/jD").jMonth() + 1; // Note: jalali-moment months are zero-based
+  const jalaliMonth = moment(jalaliDate, "jYYYY/jM/jD").jMonth() + 1;
   const jalaliDay = moment(jalaliDate, "jYYYY/jM/jD").jDate();
 
   return `${jalaliYear}/${jalaliMonth}/${jalaliDay}`;