Contacts are now dynamically loaded

src/components/Navbar.tsx

@@ -9,8 +9,7 @@ import { Fragment, useEffect, useState } from "react";
 import { Dialog, Menu, Transition } from "@headlessui/react";
 import { useRouter } from "next/navigation";
 import translation from "@/translation/navbar.json";
-import contacts from "@/contacts.json";
-
+import { Contact } from "@/types/contact";
 interface Item {
   page: string;
   key: string;
@@ -21,22 +20,15 @@ interface Item {
 
 }
 
-const items = [
-  { page: "/", key: "home" },
-  { page: "/services", key: "services" },
-  { page: "/price", key: "price" },
-  { page: "/about", key: "about" },
-  { page: "/history", key: "history" },
-  { page: "/contact", key: "contact" },
-  {
-    key: "country_manager",
-    page: "/contacts",
-    entries: contacts.map((data) => ({
-      key: data.key,
-      label: data.label,
-    })),
-  },
-] as Item[];
+async function getCountryManagers() {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`);
+
+  if(!res.ok) {
+    throw new Error("Failed to fetch contacts");
+  }
+
+  return res.json();
+}
 
 export default function Navbar({
   currentPage,
@@ -45,6 +37,34 @@ export default function Navbar({
   currentPage: string;
   language: "en" | "ar";
 }) {
+
+  const [contacts, setContacts] = useState([]);
+
+  useEffect(() => {
+    getCountryManagers()
+      .then((contacts) => setContacts(contacts.map((data: Contact) => ({
+        key: data.key,
+        label: data.label,
+      }))))
+      .catch(console.error);
+  }, []);
+
+  const items = [
+    { page: "/", key: "home" },
+    { page: "/services", key: "services" },
+    { page: "/price", key: "price" },
+    { page: "/about", key: "about" },
+    { page: "/history", key: "history" },
+    { page: "/contact", key: "contact" },
+    {
+      key: "country_manager",
+      page: "/contacts",
+      entries: contacts,
+    },
+  ] as Item[];
+
+  
+
   const [isOpen, setIsOpen] = useState(false);
 
   const renderItem = (item: Item, className: string) => {