From 006cc08b81b8188d72839439a06cf0cd9dc749e7 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:36:10 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implemented=20NavigationItem=20comp?=
 =?UTF-8?q?onent=20=F0=9F=9A=80=20Added=20the=20NavigationItem=20component?=
 =?UTF-8?q?=20to=20handle=20navigation=20=F0=9F=8E=A8=20Improved=20code=20?=
 =?UTF-8?q?structure=20and=20readability=20=F0=9F=9B=A0=20Fixed=20minor=20?=
 =?UTF-8?q?issues=20and=20added=20comments=20=F0=9F=94=97=20Ready=20for=20?=
 =?UTF-8?q?further=20development!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/Navigation/NavigationItem.tsx | 287 +++++++++++++++++++++++
 1 file changed, 287 insertions(+)
 create mode 100644 src/shared/Navigation/NavigationItem.tsx

diff --git a/src/shared/Navigation/NavigationItem.tsx b/src/shared/Navigation/NavigationItem.tsx
new file mode 100644
index 0000000..da04757
--- /dev/null
+++ b/src/shared/Navigation/NavigationItem.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import { PathName } from "@/routers/types";
+import { Popover, Transition } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React, { FC, Fragment, useEffect, useState } from "react";
+
+// <--- NavItemType --->
+export interface MegamenuItem {
+  id: string;
+  image: string;
+  title: string;
+  items: NavItemType[];
+}
+export interface NavItemType {
+  id: string;
+  name: string;
+  isNew?: boolean;
+  href: PathName;
+  targetBlank?: boolean;
+  children?: NavItemType[];
+  megaMenu?: MegamenuItem[];
+  type?: "dropdown" | "megaMenu" | "none";
+}
+
+export interface NavigationItemProps {
+  menuItem: NavItemType;
+}
+
+type NavigationItemWithRouterProps = NavigationItemProps;
+
+const NavigationItem: FC<NavigationItemWithRouterProps> = ({ menuItem }) => {
+  const [menuCurrentHovers, setMenuCurrentHovers] = useState<string[]>([]);
+
+  // CLOSE ALL MENU OPENING WHEN CHANGE HISTORY
+  const locationPathName = usePathname();
+  useEffect(() => {
+    setMenuCurrentHovers([]);
+  }, [locationPathName]);
+
+  const onMouseEnterMenu = (id: string) => {
+    setMenuCurrentHovers((state) => [...state, id]);
+  };
+
+  const onMouseLeaveMenu = (id: string) => {
+    setMenuCurrentHovers((state) => {
+      return state.filter((item, index) => {
+        return item !== id && index < state.indexOf(id);
+      });
+    });
+  };
+
+  // ===================== MENU MEGAMENU =====================
+  const renderMegaMenu = (menu: NavItemType) => {
+    const isHover = menuCurrentHovers.includes(menu.id);
+
+    const isFull = menu.megaMenu && menu.megaMenu?.length > 3;
+    const classPopover = isFull
+      ? "menu-megamenu--large"
+      : "menu-megamenu--small relative";
+    const classPanel = isFull ? "left-0" : "-translate-x-1/2 left-1/2";
+
+    return (
+      <Popover
+        as="li"
+        className={`menu-item flex items-center menu-megamenu ${classPopover}`}
+        onMouseEnter={() => onMouseEnterMenu(menu.id)}
+        onMouseLeave={() => onMouseLeaveMenu(menu.id)}
+      >
+        {() => (
+          <>
+            <div>{renderMainItem(menu)}</div>
+            <Transition
+              as={Fragment}
+              show={isHover}
+              enter="transition ease-out duration-150"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel
+                static
+                className={`will-change-transform sub-menu absolute top-full transform z-10 w-screen max-w-sm px-4 sm:px-0 lg:max-w-max ${classPanel}`}
+              >
+                <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-10 text-sm">
+                  <div
+                    className={`relative bg-white dark:bg-neutral-900 px-3 py-6 grid gap-1 grid-cols-${menu.megaMenu?.length}`}
+                  >
+                    {menu.megaMenu?.map((item) => (
+                      <div key={item.id}>
+                        <div className="px-2">
+                          <div className="w-36 h-24 rounded-lg overflow-hidden relative flex">
+                            <Image alt="" src={item.image} fill sizes="200px" />
+                          </div>
+                        </div>
+                        <p className="font-medium text-neutral-900 dark:text-neutral-200 py-1 px-2 my-2">
+                          {item.title}
+                        </p>
+                        <ul className="grid space-y-1">
+                          {item.items.map(renderMegaMenuNavlink)}
+                        </ul>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    );
+  };
+
+  const renderMegaMenuNavlink = (item: NavItemType) => {
+    return (
+      <li key={item.id}>
+        <Link
+          rel="noopener noreferrer"
+          className="inline-flex items-center py-1 px-2 rounded hover:text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 font-normal text-neutral-6000 dark:text-neutral-300"
+          href={item.href || ""}
+        >
+          {item.name}
+        </Link>
+      </li>
+    );
+  };
+
+  // ===================== MENU DROPDOW =====================
+  const renderDropdownMenu = (menuDropdown: NavItemType) => {
+    const isHover = menuCurrentHovers.includes(menuDropdown.id);
+    return (
+      <Popover
+        as="li"
+        className={`menu-item flex items-center menu-dropdown relative ${
+          menuDropdown.isNew ? "menuIsNew_lv1" : ""
+        }`}
+        onMouseEnter={() => onMouseEnterMenu(menuDropdown.id)}
+        onMouseLeave={() => onMouseLeaveMenu(menuDropdown.id)}
+      >
+        {() => (
+          <>
+            <div>{renderMainItem(menuDropdown)}</div>
+            <Transition
+              as={Fragment}
+              show={isHover}
+              enter="transition ease-out duration-150 "
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel
+                static
+                className="sub-menu will-change-transform absolute transform z-10 w-56 top-full left-0"
+              >
+                <ul className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 text-sm relative bg-white dark:bg-neutral-900 py-4 grid space-y-1">
+                  {menuDropdown.children?.map((i) => {
+                    if (i.type) {
+                      return renderDropdownMenuNavlinkHasChild(i);
+                    } else {
+                      return (
+                        <li
+                          key={i.id}
+                          className={`px-2 ${i.isNew ? "menuIsNew" : ""}`}
+                        >
+                          {renderDropdownMenuNavlink(i)}
+                        </li>
+                      );
+                    }
+                  })}
+                </ul>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    );
+  };
+
+  const renderDropdownMenuNavlinkHasChild = (item: NavItemType) => {
+    const isHover = menuCurrentHovers.includes(item.id);
+    return (
+      <Popover
+        as="li"
+        key={item.id}
+        className="menu-item flex items-center menu-dropdown relative px-2"
+        onMouseEnter={() => onMouseEnterMenu(item.id)}
+        onMouseLeave={() => onMouseLeaveMenu(item.id)}
+      >
+        {() => (
+          <>
+            <div>{renderDropdownMenuNavlink(item)}</div>
+            <Transition
+              as={Fragment}
+              show={isHover}
+              enter="transition ease-out duration-150"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel
+                static
+                className="sub-menu absolute z-10 w-56 left-full pl-2 top-0"
+              >
+                <ul className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 text-sm relative bg-white dark:bg-neutral-900 py-4 grid space-y-1">
+                  {item.children?.map((i) => {
+                    if (i.type) {
+                      return renderDropdownMenuNavlinkHasChild(i);
+                    } else {
+                      return (
+                        <li key={i.id} className="px-2">
+                          {renderDropdownMenuNavlink(i)}
+                        </li>
+                      );
+                    }
+                  })}
+                </ul>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    );
+  };
+
+  const renderDropdownMenuNavlink = (item: NavItemType) => {
+    return (
+      <Link
+        target={item.targetBlank ? "_blank" : undefined}
+        rel="noopener noreferrer"
+        className="flex items-center font-normal text-neutral-6000 dark:text-neutral-300 py-2 px-4 rounded-md hover:text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 "
+        href={item.href || ""}
+      >
+        {item.name}
+        {item.type && (
+          <ChevronDownIcon
+            className="ml-2 h-4 w-4 text-neutral-500"
+            aria-hidden="true"
+          />
+        )}
+      </Link>
+    );
+  };
+
+  // ===================== MENU MAIN MENU =====================
+  const renderMainItem = (item: NavItemType) => {
+    return (
+      <Link
+        rel="noopener noreferrer"
+        className="inline-flex items-center text-sm xl:text-base font-normal text-neutral-700 dark:text-neutral-300 py-2 px-4 xl:px-5 rounded-full hover:text-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+        href={item.href || "/"}
+      >
+        {item.name}
+        {item.type && (
+          <ChevronDownIcon
+            className="ml-1 -mr-1 h-4 w-4 text-neutral-400"
+            aria-hidden="true"
+          />
+        )}
+      </Link>
+    );
+  };
+
+  switch (menuItem.type) {
+    case "megaMenu":
+      return renderMegaMenu(menuItem);
+    case "dropdown":
+      return renderDropdownMenu(menuItem);
+    default:
+      return (
+        <li className="menu-item flex items-center">
+          {renderMainItem(menuItem)}
+        </li>
+      );
+  }
+};
+// Your component own properties
+
+export default NavigationItem;