Updated Navbar to use nested entries and added a page to display contact information

src/components/Navbar.tsx

@@ -8,7 +8,7 @@ import { BsList, BsXLg } from "react-icons/bs";
 import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import translation from "@/translation/navbar.json";
-import NestedNavbarEntry from "@/components/NestedNavbarEntry";
+import contacts from "@/contacts.json";
 
 const items = [
   { page: "/", key: "home" },
@@ -19,40 +19,11 @@ const items = [
   { page: "/contact", key: "contact" },
   {
     key: "country_manager",
-	page: '',
-    entries: [
-      {
-        key: "Egypt",
-        entries: [
-          {
-            name: "Modern Technology",
-            number: "+226578480830",
-            email: "egypt@encoach.com",
-          },
-        ],
-      },
-      {
-        key: "Oman",
-        entries: [
-          {
-            name: "Smartway education",
-            number: "+9689944094",
-            email: "oman@encoach.com",
-          },
-          { name: "MTI", number: "+9687445609", email: "mti@encoach.com" },
-        ],
-      },
-      {
-        key: "Saudi Arabia",
-        entries: [
-          {
-            name: "Edutrach services",
-            number: "+96658499347",
-            email: "edu@encoach.com",
-          },
-        ],
-      },
-    ],
+    page: "/contacts",
+    entries: contacts.map((data) => ({
+      key: data.key,
+      label: data.label,
+    })),
   },
 ];
 
@@ -64,7 +35,6 @@ export default function Navbar({
   language: "en" | "ar";
 }) {
   const [isOpen, setIsOpen] = useState(false);
-
   return (
     <>
       <header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex">
@@ -84,12 +54,30 @@ export default function Navbar({
         >
           {items.map((item) =>
             item.entries ? (
-              <NestedNavbarEntry
+              <div
                 key={item.key}
-                entry={item}
-                language={language}
-				translation={translation}
-              />
+                className={clsx(
+                  "group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer",
+                  currentPage === item.page &&
+                    "border-b-mti-purple-light border-b-2"
+                )}
+              >
+                <span className="py-2">
+                  {translation[item.key as keyof typeof translation][language]}
+                </span>
+                <ul className="absolute hidden group-hover:block bg-gray-700 text-white rounded shadow-md mt-1">
+                  {item.entries?.map((innerEntry) => (
+                    <li
+                      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}`}>
+                        {innerEntry.label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
             ) : (
               <Link
                 key={item.key}