Function DropdownMenu

app/_components/GlobalComponents/Dropdowns/DropdownMenu.tsx:22–132

({
  trigger,
  items,
  align = "left",
}: DropdownMenuProps)

}

export const DropdownMenu = ({
  trigger,
  items,
  align = "left",
}: DropdownMenuProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [openUpward, setOpenUpward] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
      document.addEventListener("keydown", handleEscape);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("keydown", handleEscape);
    };
  }, [isOpen]);

  const handleItemClick = (itemOnClick: () => void) => {
    itemOnClick();
    setIsOpen(false);
  };

  const handleToggle = () => {
    if (!isOpen && triggerRef.current) {
      const rect = triggerRef.current.getBoundingClientRect();

      let scrollParent: HTMLElement | null = triggerRef.current.parentElement;
      while (scrollParent) {
        if (scrollParent.classList.contains('jotty-sidebar-categories') || scrollParent.classList.contains('jotty-sidebar-tags')) {
          break;
        }
        scrollParent = scrollParent.parentElement;
      }

      if (scrollParent) {
        const containerRect = scrollParent.getBoundingClientRect();
        const actualSpaceBelow = containerRect.bottom - rect.bottom;
        const threshold = 200;