example.ts

setup() {
    // your menu reference
    const menuRef = ref<HTMLElement | null>(null);

    onMounted(() => {
      setTimeout(() => {
        if (!menuRef.value) {
          return;
        }
        
        // get menu instance
        const inst = MenuComponent.getInstance(menuRef.value);

        // create overlay element
        let overlay = document.createElement("div");
        overlay.classList.add("drawer-overlay");
        overlay.style.zIndex = "104";
        overlay.style.display = "none";
        document.body.append(overlay);

        // show event handler
        inst?.on("kt.menu.dropdown.show", function () {
          // show overlay
          overlay.style.display = "block";
        });

        // hide event handler
        inst?.on("kt.menu.dropdown.hide", function () {
          // hide overlay
          overlay.style.display = "none";
        });
      }, 10);
    });

    return {
      menuRef,
    };
  },