Improved support for languages on the contacts display feature

src/components/Navbar.tsx

@@ -20,8 +20,8 @@ interface Item {
 
 }
 
-async function getCountryManagers() {
-  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`);
+async function getCountryManagers(language: "en" | "ar" = "en") {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents?language=${language}`);
 
   if(!res.ok) {
     throw new Error("Failed to fetch contacts");
@@ -41,13 +41,13 @@ export default function Navbar({
   const [contacts, setContacts] = useState([]);
 
   useEffect(() => {
-    getCountryManagers()
+    getCountryManagers(language)
       .then((contacts) => setContacts(contacts.map((data: Contact) => ({
         key: data.key,
         label: data.label,
       }))))
       .catch(console.error);
-  }, []);
+  }, [language]);
 
   const items = [
     { page: "/", key: "home" },
@@ -86,7 +86,7 @@ export default function Navbar({
                 key={innerEntry.key}
                 className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center"
               >
-                <Link href={`${item.page}/${innerEntry.key}`} className="w-full h-full flex items-center">
+                <Link href={`${language === 'ar' ? '/ar' : ''}${item.page}/${innerEntry.key}`} className="w-full h-full flex items-center">
                   {innerEntry.label}
                 </Link>
               </li>