41 lines
1022 B
Vue
41 lines
1022 B
Vue
<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>
|