<template>
  <div>
    <v-btn icon @click="dialog = true">
      <v-icon>mdi-menu</v-icon>
    </v-btn>

    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon @click="dialog = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>Menu</v-toolbar-title>
        </v-toolbar>

        <v-list>
          <v-list-item
            v-for="link in links"
            :key="link.to"
            @click="navigate(link.to)"
          >
            <v-list-item-title>{{ link.name }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const props = defineProps<{ links: { name: string; to: string }[] }>()
const dialog = ref(false)
const router = useRouter()

function navigate(to: string) {
  dialog.value = false
  router.push(to)
}
</script>
