Added Navbar with nested entries

src/components/Navbar.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
-
+import React from "react";
 import Link from "next/link";
 import Image from "next/image";
 import clsx from "clsx";
 import { BsList, BsXLg } from "react-icons/bs";
-import {Fragment, useEffect, useState} from "react";
+import { Fragment, useState } from "react";
-import {Dialog, Menu, Transition} from "@headlessui/react";
+import { Dialog, Transition } from "@headlessui/react";
-import {useRouter} from "next/navigation";
 import translation from "@/translation/navbar.json";
+import NestedNavbarEntry from "@/components/NestedNavbarEntry";
 
 const items = [
   { page: "/", key: "home" },
@@ -17,51 +17,121 @@ const items = [
   { page: "/about", key: "about" },
   { page: "/history", key: "history" },
   { 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",
+          },
+        ],
+      },
+    ],
+  },
 ];
 
-export default function Navbar({currentPage, language}: {currentPage: string; language: "en" | "ar"}) {
+export default function Navbar({
+  currentPage,
+  language,
+}: {
+  currentPage: string;
+  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">
         <Link href="/">
-					<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
+          <Image
+            src="/logo_title.png"
+            alt="EnCoach logo"
+            width={128}
+            height={128}
+          />
         </Link>
-				<div className={clsx("flex w-fit items-center gap-8", language === "ar" && "flex-row-reverse")}>
+        <div
-					{items.map((item) => (
+          className={clsx(
+            "flex w-fit items-center gap-8",
+            language === "ar" && "flex-row-reverse"
+          )}
+        >
+          {items.map((item) =>
+            item.entries ? (
+              <NestedNavbarEntry
+                key={item.key}
+                entry={item}
+                language={language}
+                translation={translation}
+              />
+            ) : (
               <Link
                 key={item.key}
-							href={language === "ar" ? `/${language}${item.page}` : item.page}
+                href={
+                  language === "ar" ? `/${language}${item.page}` : item.page
+                }
                 className={clsx(
                   "hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
-								currentPage === item.page && "border-b-mti-purple-light border-b-2",
+                  currentPage === item.page &&
-							)}>
+                    "border-b-mti-purple-light border-b-2"
+                )}
+              >
                 {(translation as any)[item.key][language]}
               </Link>
-					))}
+            )
+          )}
         </div>
         <div className="flex w-fit items-center gap-4">
           <Link
             href="https://platform.encoach.com"
-						className="hover:bg-mti-purple-dark border-mti-purple-dark rounded-xl border px-8 py-2 transition duration-300 ease-in-out hover:text-white">
+            className="hover:bg-mti-purple-dark border-mti-purple-dark rounded-xl border px-8 py-2 transition duration-300 ease-in-out hover:text-white"
+          >
             {translation.platform[language]}
           </Link>
           <Link
             href="https://platform.encoach.com/register"
-						className="hover:bg-mti-purple-dark hover:border-mti-purple-dark border-mti-purple-light bg-mti-purple-light rounded-xl border px-8 py-2 text-white transition duration-300 ease-in-out">
+            className="hover:bg-mti-purple-dark hover:border-mti-purple-dark border-mti-purple-light bg-mti-purple-light rounded-xl border px-8 py-2 text-white transition duration-300 ease-in-out"
+          >
             {translation.join[language]}
           </Link>
           {language === "ar" ? (
             <Link
               className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-							href={`${currentPage}`}>
+              href={`${currentPage}`}
+            >
               EN
             </Link>
           ) : (
             <Link
               className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-							href={`/ar${currentPage}`}>
+              href={`/ar${currentPage}`}
+            >
               AR
             </Link>
           )}
@@ -69,7 +139,11 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
       </header>
 
       <Transition appear show={isOpen} as={Fragment}>
-				<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
+        <Dialog
+          as="div"
+          className="relative z-10"
+          onClose={() => setIsOpen(false)}
+        >
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -77,7 +151,8 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
             enterTo="opacity-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
-						leaveTo="opacity-0">
+            leaveTo="opacity-0"
+          >
             <div className="fixed inset-0 bg-black bg-opacity-25" />
           </Transition.Child>
 
@@ -90,41 +165,69 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
                 enterTo="opacity-100 scale-100"
                 leave="ease-in duration-200"
                 leaveFrom="opacity-100 scale-100"
-								leaveTo="opacity-0 scale-95">
+                leaveTo="opacity-0 scale-95"
+              >
                 <Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
-									<Dialog.Title as="header" className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden">
+                  <Dialog.Title
+                    as="header"
+                    className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
+                  >
                     <Link href="/">
-											<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} />
+                      <Image
+                        src="/logo_title.png"
+                        alt="EnCoach logo"
+                        width={128}
+                        height={128}
+                      />
                     </Link>
                     <div className="flex items-center gap-4">
                       {language === "ar" ? (
                         <Link
                           className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-													href={`${currentPage}`}>
+                          href={`${currentPage}`}
+                        >
                           EN
                         </Link>
                       ) : (
                         <Link
                           className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-													href={`/ar${currentPage}`}>
+                          href={`/ar${currentPage}`}
+                        >
                           AR
                         </Link>
                       )}
-											<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
+                      <div
-												<BsXLg className="text-mti-purple-light text-2xl" onClick={() => setIsOpen(false)} />
+                        className="cursor-pointer"
+                        onClick={() => setIsOpen(false)}
+                        tabIndex={0}
+                      >
+                        <BsXLg
+                          className="text-mti-purple-light text-2xl"
+                          onClick={() => setIsOpen(false)}
+                        />
                       </div>
                     </div>
                   </Dialog.Title>
-									<div className={clsx("flex flex-col gap-6 px-8 text-lg", language === "ar" && "items-end")}>
+                  <div
+                    className={clsx(
+                      "flex flex-col gap-6 px-8 text-lg",
+                      language === "ar" && "items-end"
+                    )}
+                  >
                     {items.map((item) => (
                       <Link
                         key={item.key}
-												href={language === "ar" ? `/${language}${item.page}` : item.page}
+                        href={
+                          language === "ar"
+                            ? `/${language}${item.page}`
+                            : item.page
+                        }
                         className={clsx(
                           "w-fit transition duration-300 ease-in-out",
                           currentPage === item.page &&
-														"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
-												)}>
+                        )}
+                      >
                         {(translation as any)[item.key][language]}
                       </Link>
                     ))}
@@ -133,11 +236,17 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
                       className={clsx(
                         "w-fit transition duration-300 ease-in-out",
                         currentPage === "/join" &&
-													"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
-											)}>
+                      )}
+                    >
                       {translation.join[language]}
                     </Link>
-										<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>
+                    <Link
+                      href="https://platform.encoach.com"
+                      className={clsx(
+                        "w-fit transition duration-300 ease-in-out"
+                      )}
+                    >
                       {translation.platform[language]}
                     </Link>
                   </div>
@@ -150,19 +259,26 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 
       <header className="-md:flex w-full items-center justify-between px-8 py-2 md:hidden">
         <Link href="/">
-					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+          <Image
+            src="/logo_title.png"
+            alt="EnCoach logo"
+            width={69}
+            height={69}
+          />
         </Link>
         <div className="flex items-center gap-4">
           {language === "ar" ? (
             <Link
               className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-							href={`${currentPage}`}>
+              href={`${currentPage}`}
+            >
               EN
             </Link>
           ) : (
             <Link
               className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-							href={`/ar${currentPage}`}>
+              href={`/ar${currentPage}`}
+            >
               AR
             </Link>
           )}

src/components/NestedNavbarEntry.tsx

@@ -0,0 +1,76 @@
+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/translation/navbar.json

@@ -30,5 +30,9 @@
   "join": {
     "en": "Join",
     "ar": "انضم إلينا"
+  },
+  "country_manager": {
+    "en": "Country Manager",
+    "ar": "المدير المحلي"
   }
 }