Navbar synced for mobile and desktop

src/components/Navbar.tsx

@@ -11,6 +11,16 @@ import { useRouter } from "next/navigation";
 import translation from "@/translation/navbar.json";
 import contacts from "@/contacts.json";
 
+interface Item {
+  page: string;
+  key: string;
+  entries?: {
+    key: string;
+    label: string;
+  }[];
+
+}
+
 const items = [
   { page: "/", key: "home" },
   { page: "/services", key: "services" },
@@ -26,7 +36,7 @@ const items = [
       label: data.label,
     })),
   },
-];
+] as Item[];
 
 export default function Navbar({
   currentPage,
@@ -36,6 +46,46 @@ export default function Navbar({
   language: "en" | "ar";
 }) {
   const [isOpen, setIsOpen] = useState(false);
+
+  const renderItem = (item: Item, className: string) => {
+    if (item.entries) {
+      return (
+        <div
+          key={item.key}
+          className={clsx(
+            "group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer w-fit",
+            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}`} className="w-full h-full flex items-center">
+                  {innerEntry.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
+
+    return (
+      <Link
+        key={item.key}
+        href={language === "ar" ? `/${language}${item.page}` : item.page}
+        className={className}
+      >
+        {(translation as any)[item.key][language]}
+      </Link>
+    );
+  };
   return (
     <>
       <header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex">
@@ -49,45 +99,13 @@ export default function Navbar({
         </Link>
         <div className={clsx("flex w-fit items-center gap-8")}>
           {items.map((item) =>
-            item.entries ? (
+            renderItem(
-              <div
+              item,
-                key={item.key}
+              clsx(
-                className={clsx(
+                "hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
-                  "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 &&
-                  currentPage === item.page &&
+                  "border-b-mti-purple-light border-b-2"
-                    "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}
-                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"
-                )}
-              >
-                {(translation as any)[item.key][language]}
-              </Link>
             )
           )}
         </div>
@@ -198,23 +216,16 @@ export default function Navbar({
                       language === "ar" && "items-end"
                     )}
                   >
-                    {items.map((item) => (
+                    {items.map((item) =>
-                      <Link
+                      renderItem(
-                        key={item.key}
+                        item,
-                        href={
+                        clsx(
-                          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 "
-                        )}
+                        )
-                      >
+                      )
-                        {(translation as any)[item.key][language]}
+                    )}
-                      </Link>
-                    ))}
                     <Link
                       href="https://platform.encoach.com/register"
                       className="w-fit transition duration-300 ease-in-out"