Skip to content

Instantly share code, notes, and snippets.

@laurisstepanovs
Last active August 18, 2023 09:19

Revisions

  1. laurisstepanovs revised this gist Aug 18, 2023. 1 changed file with 8 additions and 1 deletion.
    9 changes: 8 additions & 1 deletion example.ts
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,32 @@
    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);
  2. laurisstepanovs renamed this gist Aug 18, 2023. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  3. laurisstepanovs renamed this gist Aug 18, 2023. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  4. laurisstepanovs created this gist Aug 18, 2023.
    31 changes: 31 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    setup() {
    const menuRef = ref<HTMLElement | null>(null);

    onMounted(() => {
    setTimeout(() => {
    if (!menuRef.value) {
    return;
    }

    const inst = MenuComponent.getInstance(menuRef.value);

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

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

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

    return {
    menuRef,
    };
    },