fixes

data.json

@@ -167,12 +167,12 @@
         "value": "121 King St , ملبورن VIC 3000, أستراليا"
       },
       "2": {
-        "title": "المكتب الرئيسي",
+        "title": "رقم الهاتف",
         "image": "/contact/2.png",
         "value": "+61 2 8376 6284"
       },
       "3": {
-        "title": "المكتب الرئيسي",
+        "title": "عنوان البريد الإلكتروني",
         "image": "/contact/3.png",
         "value": " hello@your domain.com"
       }

src/components/layout/NavBar.tsx

@@ -1,20 +1,19 @@
-// NavBar.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { RoutesEnums } from '../../enums/RoutesEnums';
 import { MdLanguage } from 'react-icons/md';
 import { FaEllipsis } from 'react-icons/fa6';
 import { Popover } from 'antd';
 import { navBar as navBarData, Setting } from '../../../data.json';
-// Define an enum for the routes
+import { useLocation } from 'react-router-dom';
 
-// Define a type for the link objects
 interface NavLink {
-  path: RoutesEnums;
+  path: string; 
   label: string;
 }
 
 const NavBar: React.FC = () => {
-  // Define an array of link objects using the RoutesEnums
+  const location = useLocation(); 
+
   const links: NavLink[] = [
     { path: RoutesEnums.HOME, label: navBarData.link1 },
     { path: RoutesEnums.FEATURES, label: navBarData.link2 },
@@ -25,47 +24,43 @@ const NavBar: React.FC = () => {
     { path: RoutesEnums.PRIVACY, label: navBarData.link7 },
     { path: RoutesEnums.DOWNLOAD, label: navBarData.link8 },
   ];
+
+  const [active, setActive] = useState(location.pathname + location.hash); 
+
+  useEffect(() => {
+    setActive(location.pathname + location.hash);
+    if (location.pathname + location.hash === '/') {
+      setActive(location.pathname+'#');
+    }
+  }, [location.pathname, location.hash]);
+
+  const handleToggle = () => setOpen(!Open);
   const [Open, setOpen] = useState(false);
-  const handleToggle = () => {
-    setOpen(!Open);
-  };
 
   const NavBarContent = (
     <div className="NavBarContent">
       <ul className="NavBarLinks">
-        {links.map((link) => {
-          return (
-            <li
-              onClick={handleToggle}
-              key={link.path}
-              className={`${'activeLink'}`}
-            >
+        {links.map((link) => (
+          <li onClick={handleToggle} key={link.path} className="nav-item">
             <a href={link.path}>{link.label}</a>
           </li>
-          );
-        })}
+        ))}
       </ul>
     </div>
   );
 
-  const [Active, setActive] = useState(location.hash);
-
   return (
     <nav className="NavBar">
       <img loading="lazy" src={Setting.Logo} className="scale" alt="" />
       <ul className="NavBarLinks">
         {links.map((link) => {          
-          const handleClick = () => {
-            setActive(link.path);
-          };
+          const isActive = active === link.path;
 
-          const isActive =
-            Active === '' && link.path === '/#' ? true : Active === link.path;
           return (
             <li
               key={link.path}
-              onClick={handleClick}
-              className={`${isActive ? 'activeLink' : ''}`}
+              onClick={() => setActive(link.path)}
+              className={isActive ? 'activeLink' : ''}
             >
               <a href={link.path}>{link.label}</a>
             </li>