mega menu

app/shared/components/HeaderMenu.tsx

@@ -1,21 +1,62 @@
+"use client";
+
+import { cn } from "@/app/lib/cn";
 import { HamburgerMenu } from "iconsax-reactjs";
-import { FC } from "react";
+import { FC, useEffect, useRef, useState } from "react";
+import AllProductsMenu from "./AllProductsMenu";
+
+const menuItems = ["کارت ویزیت", "کاتالوگ", "بروشور", "کارت تبریک", "جعبه", "ساک دستی", "هدایای تبلیغاتی"];
 
 const HeaderMenu: FC = () => {
+  const [isAllProductsOpen, setIsAllProductsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isAllProductsOpen) return;
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setIsAllProductsOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsAllProductsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isAllProductsOpen]);
+
   return (
-    <div className="h-[72px] w-full flex-1 flex justify-center px-[120px] items-center gap-8">
-      <div className="flex gap-2 items-center">
-        <HamburgerMenu size={24} color="black" />
-        <div className="font-bold">همه محصولات</div>
+    <div ref={containerRef} className="relative h-[72px] w-full flex-1 px-[120px]">
+      <div className="flex h-full items-center justify-center gap-8">
+        <button
+          type="button"
+          className={cn("flex items-center gap-2 font-bold transition-colors", isAllProductsOpen && "text-primary")}
+          onClick={() => setIsAllProductsOpen((open) => !open)}
+          aria-expanded={isAllProductsOpen}
+          aria-haspopup="true"
+        >
+          <HamburgerMenu size={24} color="currentColor" />
+          <span>همه محصولات</span>
+        </button>
+
+        {menuItems.map((item) => (
+          <div key={item} className="font-bold">
+            {item}
+          </div>
+        ))}
       </div>
 
-      <div className="font-bold">کارت ویزیت</div>
-      <div className="font-bold">کاتالوگ</div>
-      <div className="font-bold">بروشور</div>
-      <div className="font-bold">کارت تبریک</div>
-      <div className="font-bold">جعبه</div>
-      <div className="font-bold">ساک دستی</div>
-      <div className="font-bold">هدایای تبلیغاتی</div>
+      {isAllProductsOpen && <AllProductsMenu />}
     </div>
   );
 };