<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Using Default Slot">
        <AisMenuItem label="Menu Item 1" href="/menu/item/1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2" to="/menu/item/1"></AisMenuItem>
        <AisMenuItem label="Menu Item 3" @click="handleClick"></AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";

  const handleClick = (e) => { console.log(`Item Clicked ${e}`) }
</script>

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