hamid zarghami
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import { cn } from "@/app/lib/cn";
|
||
import { HamburgerMenu } from "iconsax-reactjs";
|
||
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 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>
|
||
|
||
{isAllProductsOpen && <AllProductsMenu />}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default HeaderMenu;
|