PopupMenu.tsx•1.29 kB
"use client";
import { useBoolean, useOutsideClick } from "@/utils";
import { MenuIcon } from "@/ui/Icons";
import { IconButton } from "@/ui/elements";
import classNames from 'classnames';
interface PopupMenuProps {
children: React.ReactNode;
triggerElement?: React.ReactNode;
triggerClassName?: string;
openToRight?: boolean;
}
export default function PopupMenu({ triggerElement, triggerClassName, children, openToRight = false }: PopupMenuProps) {
const {
value: isMenuOpen,
setFalse: closeMenu,
toggle: toggleMenu,
} = useBoolean(false);
const menuRootRef = useOutsideClick<HTMLDivElement>(closeMenu);
return (
<div className="relative inline-block" ref={menuRootRef}>
<IconButton as="div" className={triggerClassName} onClick={toggleMenu}>
{triggerElement || <MenuIcon />}
</IconButton>
{isMenuOpen && (
<div
className={
classNames(
"absolute top-full flex flex-col gap-4 pl-1 py-3 pr-4",
"whitespace-nowrap bg-white border-1 border-gray-100 z-10",
{
"left-0": openToRight,
"right-0": !openToRight,
},
)
}
>
{children}
</div>
)}
</div>
);
};