<!-- This example requires Tailwind CSS v2.0+ -->
<template>
  <Menu as="div" v-slot="{ open }" class="relative inline-block text-left z-50">
    <div>
      <MenuButton class="transition inline-flex items-center justify-center   focus:outline-none ">
        <svg :class="[open ? 'rotate-90' : 'rotate-180' ,'transform-gpu transition-transform transform w-6 h-6']">
            <use xlink:href="#more-vertical"></use>
        </svg>
      </MenuButton>
    </div>

    <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
        <slot />
    </transition>
  </Menu>
</template>

<script>
import { Menu, MenuButton } from '@headlessui/vue'

export default {
  components: {
    Menu,
    MenuButton,
  },
}
</script>
