<template>
  <div class="flex gap-8">
    <div>
      <AisDropdown label="Multi-Level" variant="secondary" size="md" font="sans" rounded>
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenu label="Nested&nbsp;Menu&nbsp;1"
                 icon="group"
                 dropright
        >
          <AisMenuItem label="Nested Menu Item 1" icon="person"></AisMenuItem>
          <AisMenuItem label="Nested Menu Item 2" icon="person"></AisMenuItem>
          <AisMenuItem label="Nested Menu Item 3" icon="person"></AisMenuItem>
        </AisMenu>
      </AisDropdown>
    </div>
  </div>

</template>

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

</script>

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