<template>
  <div class="page-actions-dropdown">
    <GnDropdown :items="items" v-bind="$attrs">
      <template #trigger="{ toggle, open }">
        <button
          class="btn-icon"
          type="button"
          aria-label="Actions"
          :aria-expanded="open ? 'true' : 'false'"
          @click="toggle"
        >
          <i class="ph ph-dots-three-vertical" />
        </button>
      </template>
    </GnDropdown>
  </div>
</template>

<script setup>
import { GnDropdown } from "gnexus-ui-kit/vue";

defineProps({
  items: { type: Array, required: true },
});
</script>

<style>
/* Allow dropdown menu to escape .page-header overflow:hidden */
.page-header:has(> .page-header-actions .page-actions-dropdown) {
  overflow: visible;
}

/* Align dropdown menu to the right edge of the trigger button */
.page-actions-dropdown .dropdown-menu {
  left: auto;
  right: 0;
  transform-origin: top right;
}
</style>