Bottom Menu

1"use client";
2 
3import {
4  Notification03Icon,
5  Search01Icon,
6  Sun03Icon,
7  Moon02Icon,
8  ComputerIcon,
9  UserEdit01Icon,
10  PlusSignIcon,
11  Mic01Icon,
12  Camera01Icon,
13  PencilEdit02Icon,
14  FilterHorizontalIcon,
15  AutoConversationsIcon,
16} from "@hugeicons/core-free-icons";
17import { HugeiconsIcon } from "@hugeicons/react";
18import React, { useMemo, useState, useRef, useEffect } from "react";
19import { AnimatePresence, motion } from "motion/react";
20import useMeasure from "react-use-measure";
21import { cn } from "@/lib/utils";
22 
23// Change Here
24const MAIN_NAV = [
25  { icon: PlusSignIcon, name: "home" },
26  { icon: Search01Icon, name: "search" },
27  { icon: Notification03Icon, name: "notifications" },
28  { icon: UserEdit01Icon, name: "profile" },
29  { icon: Sun03Icon, name: "theme" },
30];
31 
32const HOME_ITEMS = [
33  { icon: PencilEdit02Icon, text: "Note" },
34  { icon: Mic01Icon, text: "Voice" },
35  { icon: Camera01Icon, text: "Screenshot" },
36];
37 
38const SEARCH_OPTIONS = [
39  { icon: FilterHorizontalIcon, text: "Filter" },
40  { icon: AutoConversationsIcon, text: "Trending" },
41];
42 
43const NOTIFICATION_TYPES = ["Messages", "System Alerts"];
44 
45const PROFILE_LINKS = ["My Account", "Settings", "Subscription / Billing"];
46 
47const THEME_OPTIONS = [
48  { key: "light", icon: Sun03Icon, text: "Light" },
49  { key: "dark", icon: Moon02Icon, text: "Dark" },
50  { key: "system", icon: ComputerIcon, text: "System" },
51];
52 
53const BottomMenu = () => {
54  const containerRef = useRef<HTMLDivElement>(null);
55  const [elementRef] = useMeasure();
56  const [hiddenRef, hiddenBounds] = useMeasure();
57  const [view, setView] = useState<
58    "default" | "home" | "search" | "notifications" | "profile" | "theme"
59  >("default");
60 
61  // Track selected theme
62  const [theme, setTheme] = useState<"light" | "dark" | "system">("light");
63  useEffect(() => {
64    const handleClickOutside = (event: MouseEvent) => {
65      if (
66        containerRef.current &&
67        !containerRef.current.contains(event.target as Node)
68      ) {
69        setView("default");
70      }
71    };
72 
73    document.addEventListener("mousedown", handleClickOutside);
74    return () => {
75      document.removeEventListener("mousedown", handleClickOutside);
76    };
77  }, []);
78 
79  const sharedHover =
80    "group transition-all duration-75 px-3 py-2 text-[15px] text-muted-foreground w-full text-left rounded-[12px] hover:bg-muted/80 hover:text-foreground";
81 
82  const content = useMemo(() => {
83    switch (view) {
84      case "default":
85        return null;
86 
87      case "home":
88// … truncated