"use client"; import { Notification03Icon, Search01Icon, Sun03Icon, Moon02Icon, ComputerIcon, UserEdit01Icon, PlusSignIcon, Mic01Icon, Camera01Icon, PencilEdit02Icon, FilterHorizontalIcon, AutoConversationsIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import React, { useMemo, useState, useRef, useEffect } from "react"; import { AnimatePresence, motion } from "motion/react"; import useMeasure from "react-use-measure"; import { cn } from "@/lib/utils"; // Change Here const MAIN_NAV = [ { icon: PlusSignIcon, name: "home" }, { icon: Search01Icon, name: "search" }, { icon: Notification03Icon, name: "notifications" }, { icon: UserEdit01Icon, name: "profile" }, { icon: Sun03Icon, name: "theme" }, ]; const HOME_ITEMS = [ { icon: PencilEdit02Icon, text: "یادداشت" }, { icon: Mic01Icon, text: "صدا" }, { icon: Camera01Icon, text: "اسکرین‌شات" }, ]; const SEARCH_OPTIONS = [ { icon: FilterHorizontalIcon, text: "فیلتر" }, { icon: AutoConversationsIcon, text: "پرطرفدار" }, ]; const NOTIFICATION_TYPES = ["پیام‌ها", "هشدارهای سیستم"]; const PROFILE_LINKS = ["حساب من", "تنظیمات", "اشتراک / صورتحساب"]; const THEME_OPTIONS = [ { key: "light", icon: Sun03Icon, text: "روشن" }, { key: "dark", icon: Moon02Icon, text: "تیره" }, { key: "system", icon: ComputerIcon, text: "سیستم" }, ]; const BottomMenu = () => { const containerRef = useRef(null); const [elementRef] = useMeasure(); const [hiddenRef, hiddenBounds] = useMeasure(); const [view, setView] = useState< "default" | "home" | "search" | "notifications" | "profile" | "theme" >("default"); // Track selected theme const [theme, setTheme] = useState<"light" | "dark" | "system">("light"); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( containerRef.current && !containerRef.current.contains(event.target as Node) ) { setView("default"); } }; document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, []); const sharedHover = "group w-full rounded-[12px] px-3 py-2 text-start text-[15px] text-muted-foreground transition-all duration-75 hover:bg-muted/80 hover:text-foreground"; const content = useMemo(() => { switch (view) { case "default": return null; case "home": return (

{HOME_ITEMS.map(({ icon: Icon, text }) => ( ))}

); case "search": return (

{SEARCH_OPTIONS.map(({ icon: Icon, text }) => ( ))}

); case "notifications": return (

{NOTIFICATION_TYPES.map((t) => ( ))}

); case "profile": return (

{PROFILE_LINKS.map((t) => ( ))}

); case "theme": return (

{THEME_OPTIONS.map(({ key, icon: Icon, text }) => ( ))}

); default: return null; } }, [view, theme]); return (

{/* Hidden for measurement */}

{content}

{/* Animated submenu */} {view !== "default" && (

{content}

)} {/* Toolbar */}

{MAIN_NAV.map(({ icon: Icon, name }) => ( ))}

); }; export default BottomMenu;