"use client"; import { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"; import { ArrowDown01Icon, ArrowLeft01Icon, BookOpen01Icon, Briefcase01Icon, Building03Icon, ChartHistogramIcon, CreditCardIcon, File01Icon, FolderIcon, HelpCircleIcon, Image01Icon, Layers01Icon, Megaphone01Icon, NewsIcon, PaintBoardIcon, Rocket01Icon, UserGroupIcon, UserIcon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; const spring = { type: "spring" as const, stiffness: 420, damping: 34, mass: 0.75, }; type MenuLeaf = { id: string; label: string; icon: IconSvgElement; }; type MenuBranch = { id: string; label: string; icon: IconSvgElement; children: MenuItem[]; }; type MenuItem = MenuLeaf | MenuBranch; function isBranch(item: MenuItem): item is MenuBranch { return "children" in item && Array.isArray(item.children); } const TOP: MenuItem[] = [ { id: "products", label: "محصولات", icon: Layers01Icon, children: [ { id: "studio", label: "استودیو", icon: PaintBoardIcon, children: [ { id: "canvas", label: "بوم طراحی", icon: Image01Icon }, { id: "components", label: "کامپوننت‌ها", icon: Layers01Icon }, { id: "templates", label: "قالب‌ها", icon: File01Icon }, ], }, { id: "workspace", label: "فضای کار", icon: FolderIcon, children: [ { id: "projects", label: "پروژه‌ها", icon: FolderIcon }, { id: "files", label: "فایل‌ها", icon: File01Icon }, { id: "media", label: "رسانه", icon: Image01Icon }, ], }, { id: "analytics", label: "تحلیل", icon: ChartHistogramIcon }, ], }, { id: "solutions", label: "راه‌حل‌ها", icon: Briefcase01Icon, children: [ { id: "startups", label: "استارتاپ‌ها", icon: Rocket01Icon }, { id: "teams", label: "تیم‌ها", icon: UserGroupIcon }, { id: "enterprise", label: "سازمانی", icon: Building03Icon, children: [ { id: "security", label: "امنیت", icon: Building03Icon }, { id: "billing", label: "صورتحساب", icon: CreditCardIcon }, { id: "support", label: "پشتیبانی", icon: HelpCircleIcon }, ], }, ], }, { id: "resources", label: "منابع", icon: BookOpen01Icon, children: [ { id: "docs", label: "مستندات", icon: BookOpen01Icon }, { id: "blog", label: "بلاگ", icon: NewsIcon }, { id: "changelog", label: "تغییرات", icon: Megaphone01Icon }, ], }, { id: "pricing", label: "قیمت‌ها", icon: CreditCardIcon }, { id: "about", label: "درباره", icon: UserIcon }, ]; function useHoverIntent(delayMs = 120) { const timer = useRef | null>(null); useEffect(() => { return () => { if (timer.current) clearTimeout(timer.current); }; }, []); return { enter(fn: () => void) { if (timer.current) clearTimeout(timer.current); fn(); }, leave(fn: () => void) { if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(fn, delayMs); }, }; } function NestedPanel({ items, onPick, reduce, }: { items: MenuItem[]; onPick: (id: string) => void; reduce: boolean; }) { const [openId, setOpenId] = useState(null); const intent = useHoverIntent(110); return ( ); } export function SoftHorizontalMenu({ className, }: { className?: string; }) { const reduce = useReducedMotion() ?? false; const uid = useId(); const rootRef = useRef(null); const intent = useHoverIntent(140); const [openTop, setOpenTop] = useState(null); const [openChild, setOpenChild] = useState(null); const [active, setActive] = useState(null); const openTopRef = useRef(openTop); openTopRef.current = openTop; useEffect(() => { const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") { setOpenTop(null); setOpenChild(null); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, []); useEffect(() => { const onPointerDown = (event: MouseEvent) => { if (!rootRef.current?.contains(event.target as Node)) { setOpenTop(null); setOpenChild(null); } }; document.addEventListener("mousedown", onPointerDown); return () => document.removeEventListener("mousedown", onPointerDown); }, []); return (

{TOP.map((item) => { const branch = isBranch(item); const open = openTop === item.id; const selected = active === item.id; return (

intent.enter(() => { if (branch) { if (openTopRef.current !== item.id) setOpenChild(null); setOpenTop(item.id); } else { setOpenTop(null); setOpenChild(null); } }) } onMouseLeave={() => intent.leave(() => { if (openTopRef.current === item.id) { setOpenTop(null); setOpenChild(null); } }) } > {open && branch ? ( ) : null}

); })}

); } const SHELL = "fill-muted-foreground/70 font-[family-name:var(--font-estedad),Tahoma,Arial,sans-serif] tracking-normal"; export default function HorizontalMenu() { return (

); }