"use client"; import { useEffect, useRef, useState, type Dispatch, type SetStateAction, } from "react"; import { AnimatePresence, motion, MotionConfig } from "motion/react"; import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"; import clsx from "clsx"; import { ArrowLeft01Icon, ArrowRight01Icon, UserIcon, Notification03Icon, CreditCardIcon, SettingsIcon, LanguageCircleIcon, Moon02Icon, FolderIcon, File01Icon, Image01Icon, Share01Icon, HelpCircleIcon, LogoutIcon, MoreHorizontalCircle01Icon, SecurityLockIcon, PaintBoardIcon, } from "@hugeicons/core-free-icons"; type MenuLeaf = { id: string; label: string; icon: IconSvgElement; danger?: boolean; }; type MenuBranch = { id: string; label: string; icon: IconSvgElement; children: MenuLeaf[]; }; type MenuEntry = | MenuLeaf | MenuBranch | { id: "divider"; label?: never; icon?: never }; function isBranch(item: MenuEntry): item is MenuBranch { return "children" in item && Array.isArray(item.children); } // Change Here const ROOT_ITEMS: MenuEntry[] = [ { id: "profile", label: "پروفایل", icon: UserIcon }, { id: "workspace", label: "فضای کار", icon: FolderIcon, children: [ { id: "projects", label: "پروژه‌ها", icon: FolderIcon }, { id: "files", label: "فایل‌ها", icon: File01Icon }, { id: "media", label: "رسانه", icon: Image01Icon }, { id: "share", label: "اشتراک‌گذاری", icon: Share01Icon }, ], }, { id: "preferences", label: "ترجیحات", icon: SettingsIcon, children: [ { id: "appearance", label: "ظاهر", icon: PaintBoardIcon }, { id: "language", label: "زبان", icon: LanguageCircleIcon }, { id: "theme", label: "تم", icon: Moon02Icon }, { id: "security", label: "امنیت", icon: SecurityLockIcon }, ], }, { id: "billing", label: "صورتحساب", icon: CreditCardIcon }, { id: "notifications", label: "اعلان‌ها", icon: Notification03Icon }, { id: "divider" }, { id: "help", label: "راهنما", icon: HelpCircleIcon }, { id: "logout", label: "خروج", icon: LogoutIcon, danger: true }, ]; const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; function MenuRow(props: { index: number; item: MenuLeaf | MenuBranch; setIsOpen: Dispatch>; onOpenBranch: (branch: MenuBranch) => void; }) { const { index, item, setIsOpen, onOpenBranch } = props; const branch = isBranch(item); const leaf = item as MenuLeaf; const danger = !branch && Boolean(leaf.danger); const delay = (index + 8) * 0.025; return ( { if (branch) { onOpenBranch(item); return; } setTimeout(() => setIsOpen(false), 120); }} className={clsx( "flex cursor-default items-center justify-between rounded-2xl px-4 py-3 text-foreground hover:bg-accent", danger && "text-destructive hover:bg-destructive/10", )} >

{item.label}

{branch ? ( ) : null} ); } export default function NestedDropdown() { const containerRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const [stack, setStack] = useState([]); const [navDir, setNavDir] = useState<1 | -1>(1); const current = stack[stack.length - 1] ?? null; const items: MenuEntry[] = current ? current.children : ROOT_ITEMS; const panelKey = current?.id ?? "root"; useEffect(() => { if (!isOpen) setStack([]); }, [isOpen]); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( containerRef.current && !containerRef.current.contains(event.target as Node) ) { setIsOpen(false); } }; if (isOpen) document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, [isOpen]); useEffect(() => { if (!isOpen) return; const onKey = (event: KeyboardEvent) => { if (event.key !== "Escape") return; if (stack.length > 0) { setNavDir(-1); setStack((s) => s.slice(0, -1)); } else { setIsOpen(false); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [isOpen, stack.length]); const openSub = (branch: MenuBranch) => { setNavDir(1); setStack((s) => [...s, branch]); }; const goBack = () => { setNavDir(-1); setStack((s) => s.slice(0, -1)); }; return (

{!isOpen ? (

setIsOpen(true)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setIsOpen(true); } }} className="relative flex h-20 w-20 cursor-pointer items-center justify-center" >

) : (

); }