anonaddy/resources/js/components/MoreOptions.vue

<template>
  <div class="relative flex justify-end items-center" @keydown.escape="isOpen = false">
    <button
      ref="openOptions"
      @click="isOpen = !isOpen"
      :aria-expanded="isOpen"
      id="project-options-menu-0"
      aria-has-popup="true"
      type="button"
      class="w-8 h-8 bg-white inline-flex items-center justify-center text-grey-400 rounded-full hover:text-grey-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
    >
      <span class="sr-only">Open options</span>

      <icon
        name="more"
        class="block w-6 h-6 text-grey-300 fill-current cursor-pointer outline-none"
        aria-hidden="true"
      />
    </button>

    <transition
      enter-active-class="transition ease-out duration-100"
      enter-class="transform opacity-0 scale-95"
      enter-to-class="transform opacity-100 scale-100"
      leave-active-class="transition ease-in duration-75"
      leave-class="transform opacity-100 scale-100"
      leave-to-class="transform opacity-0 scale-95"
    >
      <div
        v-show="isOpen"
        class="mx-3 origin-top-right absolute right-7 top-0 w-48 mt-1 rounded-md shadow-lg z-10 bg-white ring-1 ring-black ring-opacity-5 divide-y divide-grey-200"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="project-options-menu-0"
      >
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    }
  },
  created() {
    window.addEventListener('click', this.close)
  },

  beforeDestroy() {
    window.removeEventListener('click', this.close)
  },

  methods: {
    close(e) {
      if (!this.$refs.openOptions.contains(e.target)) {
        this.isOpen = false
      }
    },
  },
}
</script>