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}

src/components/NestedNavbarEntry.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-interface NavbarNestedEntry {
-  name: string;
-  number: string;
-  email: string;
-}
-interface NavbarEntry {
-  key: string;
-  entries: {
-    key: string;
-    entries: NavbarNestedEntry[];
-  }[];
-}
-const NestedSubmenus = ({ entry }: { entry: NavbarEntry }) => {
-  const [open, setOpen] = React.useState<string | null>(null);
-
-  return (
-    <ul className="absolute hidden group-hover:block bg-gray-700 text-white rounded shadow-md mt-1">
-      {entry.entries.map((entry) => (
-        <li key={entry.key} className="group relative">
-          <div
-            className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center"
-            onMouseEnter={() => setOpen(entry.key)}
-            onMouseLeave={() => setOpen(null)}
-          >
-            <span>{entry.key}</span>
-            {open === entry.key && (
-              <ul className="absolute hidden group-hover:block bg-gray-800 text-white rounded shadow-md left-full top-0">
-                {entry.entries.map((value) => (
-                  <li
-                    key={value.name}
-                    className="px-4 py-2 hover:bg-gray-700 whitespace-nowrap h-12 flex items-center"
-                  >
-                    <span>{value.name}</span>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </div>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-const NestedNavbarEntry = ({
-  entry,
-  language,
-  translation
-}: {
-  entry: NavbarEntry;
-  language: "en" | "ar";
-  translation: any
-}) => {
-  const [open, setOpen] = React.useState<string | null>(null);
-
-  return (
-    <div
-      className={clsx(
-        "group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer",
-        open === entry.key && "border-b-mti-purple-light border-b-2"
-      )}
-      onMouseEnter={() => setOpen(entry.key)}
-      onMouseLeave={() => setOpen(null)}
-    >
-      <span className="py-2">
-        {translation[entry.key][language]}
-      </span>
-      <NestedSubmenus entry={entry} />
-    </div>
-  );
-};
-
-export default NestedNavbarEntry;