<template>
  <v-app>
    <v-container>
      <v-btn id="rootButton">
        Open Menu 1
      </v-btn>
      <v-menu
        v-model="menu1"
        :close-on-content-click="false"
        activator="#rootButton"
        height="300px"
        location="top"
        width="260px"
        persistent
      >
        <v-card>
          <v-card-title>
            Menu 1
          </v-card-title>
          <v-card-item>
            <v-row>
              <v-col cols="12">
                <v-text-field v-model="menu1Text" label="Some text" />
              </v-col>
              <v-col cols="12">
                <v-menu
                  v-model="menu2"
                  :close-on-content-click="false"
                >
                  <template #activator="{ props }">
                    <div v-bind="props" z-index="2000">
                      <v-text-field
                        :model-value="date"
                      />
                    </div>
                  </template>
                  <v-date-picker
                    v-model="date"
                    theme="legacy"
                    @update:model-value="menu2 = false"
                  />
                </v-menu>
              </v-col>
            </v-row>
          </v-card-item>
          <v-card-actions>
            <v-spacer />

            <v-btn
              variant="text"
              @click="menu1 = false"
            >
              Cancel
            </v-btn>
            <v-btn
              color="primary"
              variant="text"
              @click="menu1 = false"
            >
              Save
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { Ref, ref } from 'vue'

  const menu1: Ref<boolean> = ref(false)
  const menu2: Ref<boolean> = ref(false)
  const menu1Text: Ref<string> = ref('')
  const date: Ref<Date> = ref(new Date())
</script>