<template>
  <v-app theme="dark">
    <v-container>
      <div class="d-flex ga-5">
        <v-btn color="green">
          Just a menu on top
          <v-menu activator="parent" stick-to-target>
            <v-list :items="items" border />
          </v-menu>
        </v-btn>
        <v-spacer />
      </div>
      <div v-for="i in 30" :key="i">Lorem ipsum dolor sit</div>
      <v-select :items="items" />
      <div v-for="i in 30" :key="i">Lorem ipsum dolor sit</div>
      <v-btn color="green">
        Just a menu on bottom
        <v-menu activator="parent" stick-to-target>
          <v-list :items="items" border />
        </v-menu>
      </v-btn>
    </v-container>
  </v-app>
</template>

<script setup>
  const items = Array.from({ length: 5 }, (_, i) => `Item #${i + 1}`)
</script>

<template>
  <v-app theme="dark">
    <v-container>
      <!--Button Component-->
      <v-btn color="primary">
        Action Button
        <v-menu activator="parent">
          <v-card>Action Info</v-card>
        </v-menu>
      </v-btn>

      <!--Input component-->
      <v-text-field style="margin-top: 20px">
        <v-menu
          :close-on-content-click="false"
          activator="parent"
          open-on-hover
        >
          Hover Action Menu
        </v-menu>
      </v-text-field>
    </v-container>
  </v-app>
</template>