dropdown_controller.js

import { Controller } from "@hotwired/stimulus";
import { useTransition } from "stimulus-use";

// Connects to data-controller="profile-menu"
export default class extends Controller {
  static targets = ["menu"];
  connect() {
    this.addTransitionStyling();
    useTransition(this, { element: this.menuTarget });
  }

  toggle() {
    this.toggleTransition();
  }

  hide(event) {
    if (
      !this.element.contains(event.target) &&
      !this.menuTarget.classList.contains("hidden")
    ) {
      this.leave();
    }
  }

  addTransitionStyling() {
    var transitionList = {
      transitionEnterActive: "transition ease-out duration-200",
      transitionEnterFrom: "transform opacity-0 scale-95",
      transitionEnterTo: "transform opacity-100 scale-100",
      transitionLeaveActive: "transition ease-in duration-75",
      transitionLeaveFrom: "transform opacity-100 scale-100",
      transitionLeaveTo: "transform opacity-0 scale-95",
    };

    Object.keys(transitionList).forEach((key) => {
      this.menuTarget.dataset[key] = transitionList[key];
    });
  }
}