Expand Menu

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7export type ExpandMenuItemType = {
8  icon: React.ReactNode;
9  label: string;
10  onClick?: () => void;
11};
12 
13export type ExpandMenuProps = {
14  items: ExpandMenuItemType[];
15  direction?: "up" | "down" | "left" | "right";
16  showLabels?: boolean;
17  triggerIcon?: React.ReactNode;
18  className?: string;
19};
20 
21// anchor so the trigger stays in place while items expand away from it
22const anchorStyle: Record<string, React.CSSProperties> = {
23  down: { top: 0, left: 0 },
24  right: { top: 0, left: 0 },
25  up: { bottom: 0, left: 0 },
26  left: { top: 0, right: 0 },
27};
28 
29// "up" / "left" need the trigger last so it stays at the anchor corner
30const triggerLast = (d: string) => d === "up" || d === "left";
31 
32const flexDirMap: Record<string, React.CSSProperties["flexDirection"]> = {
33  down: "column",
34  up: "column",
35  right: "row",
36  left: "row",
37};
38 
39function TriggerButton({
40  open,
41  triggerIcon,
42  onClick,
43}: {
44  open: boolean;
45  triggerIcon?: React.ReactNode;
46  onClick: () => void;
47}) {
48  return (
49    <motion.button
50      layout
51      onClick={onClick}
52      aria-expanded={open}
53      style={{ borderRadius: 9999, flexShrink: 0 }}
54      className="flex items-center justify-center w-9 h-9 hover:bg-gray-100 active:bg-gray-200 transition-colors cursor-pointer"
55    >
56      <motion.span
57        animate={{ rotate: open ? 45 : 0 }}
58        transition={{ type: "spring", stiffness: 400, damping: 28 }}
59        className="flex items-center justify-center"
60      >
61        {triggerIcon ?? (
62          <svg
63            width="16"
64            height="16"
65            viewBox="0 0 16 16"
66            fill="currentColor"
67            className="text-gray-700"
68          >
69            <path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0 4.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0 4.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z" />
70          </svg>
71        )}
72      </motion.span>
73    </motion.button>
74  );
75}
76 
77function MenuItem({
78  icon,
79  label,
80  onClick,
81  index,
82  showLabels,
83}: ExpandMenuItemType & { index: number; showLabels: boolean }) {
84  return (
85    <motion.button
86      layout
87      initial={{ opacity: 0, scale: 0.7 }}
88      animate={{ opacity: 1, scale: 1 }}
89      exit={{ opacity: 0, scale: 0.7 }}
90      transition={{
91        delay: index * 0.04,
92        type: "spring",
93        stiffness: 400,
94        damping: 28,
95      }}
96      onClick={onClick}
97// … truncated