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

src/app/contacts/[country]/page.tsx

@@ -0,0 +1,78 @@
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import Title from "@/components/Title";
+import contacts from "../../../contacts.json";
+
+interface Contact {
+  key: string;
+  label: string;
+  entries: {
+    name: string;
+    number: string;
+    email: string;
+  }[];
+}
+
+type Language = "en" | "ar";
+
+interface PageProps {
+  params: {
+    country: string;
+  };
+  searchParams: {
+    page: string;
+    language: Language;
+  };
+}
+
+export function generateStaticParams() {
+  // down the line, this is required to be loaded from a CMS
+  // for now, we'll just use a JSON file
+
+  // do not forget the actually render this as multiple languages
+  return contacts.map(({ key }) => ({
+    country: key.toLowerCase().replaceAll(" ", ""),
+  }));
+}
+
+export default function Page({
+  params: { country },
+  searchParams: { page = "/contacts", language = "en" },
+}: PageProps) {
+  // this approach will not be viable later on when we have multiple languages
+  // or use the data from the server
+  // replace this with a fetch to the CMS
+  const contact = contacts.find(({ key }) => key === country) as Contact;
+
+  return (
+    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
+      <Navbar currentPage={page} language={language} />
+
+      <section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <Title>{`${contact.label} Contacts`}</Title>
+        </div>
+      </section>
+
+      <section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
+        {contact.entries.map((entry) => (
+          <div key={entry.name}>
+            <h2>
+              <strong>Name: </strong>
+              {entry.name}
+            </h2>
+            <p>
+              <strong>Number: </strong>
+              {entry.number}
+            </p>
+            <p>
+              <strong>Email: </strong>
+              {entry.email}
+            </p>
+          </div>
+        ))}
+      </section>
+      <Footer language={language} />
+    </main>
+  );
+}

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: '',
+    page: "/contacts",
-    entries: [
+    entries: contacts.map((data) => ({
-      {
+      key: data.key,
-        key: "Egypt",
+      label: data.label,
-        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",
-          },
-        ],
-      },
-    ],
   },
 ];
 
@@ -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}
+                className={clsx(
-                language={language}
+                  "group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer",
-				translation={translation}
+                  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;

src/contacts.json

@@ -0,0 +1,36 @@
+[
+  {
+    "label": "Egypt",
+    "key": "egypt",
+    "entries": [
+      {
+        "name": "Modern Technology",
+        "number": "+226578480830",
+        "email": "egypt@encoach.com"
+      }
+    ]
+  },
+  {
+    "label": "Oman",
+    "key": "oman",
+    "entries": [
+      {
+        "name": "Smartway education",
+        "number": "+9689944094",
+        "email": "oman@encoach.com"
+      },
+      { "name": "MTI", "number": "+9687445609", "email": "mti@encoach.com" }
+    ]
+  },
+  {
+    "label": "Saudi Arabia",
+    "key": "saudiarabia",
+    "entries": [
+      {
+        "name": "Edutrach services",
+        "number": "+96658499347",
+        "email": "edu@encoach.com"
+      }
+    ]
+  }
+]