"use client"; import { useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import type { Category, CategoryNode, CategoryTreeGroup } from "@/lib/meshkee"; import { EmptyState } from "@/components/ui/EmptyState"; import { CartButton } from "@/components/cart/CartButton"; import { SearchBar } from "./SearchBar"; const navLinks = [ { label: "فروشگاه", href: "/store-items" }, { label: "فروش ویژه", href: "#" }, { label: "درباره ما", href: "#" }, { label: "سوالات متداول", href: "#" }, { label: "تماس با ما", href: "/contact" }, ]; const LOGIN_URL = "https://customer.sanihome.ir"; function Logo({ large = false }: { large?: boolean }) { return ( {/* eslint-disable-next-line @next/next/no-img-element */} سانی‌هوم ); } function ChevronDownIcon({ className = "" }: { className?: string }) { return ( ); } function flattenLevel2(categoryTree: CategoryTreeGroup[]): CategoryNode[] { return categoryTree.flatMap((group) => group.items); } function MobileDrawer({ open, onClose, categoryTree, }: { open: boolean; onClose: () => void; categoryTree: CategoryTreeGroup[]; }) { const [categoriesOpen, setCategoriesOpen] = useState(false); const [mounted, setMounted] = useState(false); const level2 = flattenLevel2(categoryTree); useEffect(() => { setMounted(true); }, []); useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [open]); useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") onClose(); }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [onClose]); if (!mounted) return null; return createPortal(
, document.body, ); } export function Header({ categoryTree, categories, }: { categoryTree: CategoryTreeGroup[]; categories: Category[]; }) { const [menuOpen, setMenuOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); const menuRef = useRef(null); const level2 = flattenLevel2(categoryTree); useEffect(() => { const onClickOutside = (event: MouseEvent) => { if (menuRef.current && !menuRef.current.contains(event.target as Node)) { setMenuOpen(false); } }; document.addEventListener("mousedown", onClickOutside); return () => document.removeEventListener("mousedown", onClickOutside); }, []); return (
setDrawerOpen(false)} categoryTree={categoryTree} />
); }