<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="Multi-Level">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenu label="Nested&nbsp;Menu&nbsp;1"
                 icon="group"
                 dropright
        >
          <AisMenuItem label="Menu Item 3.1" icon="person"></AisMenuItem>
          <AisMenuItem label="Menu Item 3.2" icon="person"></AisMenuItem>
          <AisMenuItem label="Menu Item 3.3" icon="person"></AisMenuItem>
        </AisMenu>
      </AisMenu>
    </div>
  </div>

</template>

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

</script>

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