<template>
  <div class="flex justify-between gap-8">
    <div>
      <AisMenu label="Drop-Right"
               :items="items"
               arrow-icon="right"
               dropright
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Up"
               :items="items"
               dropup
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Up & Right"
               :items="items"
               dropup right
      ></AisMenu>
    </div>

    <div>
      <AisMenu label="Drop-Left"
               :items="items"
               icon="left"
               dropleft
      ></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import { items } from "@/components/menu/examples/example-items.js"
</script>

<script>
export default {
  name: "AisMenuPositioning",
}
</script>