skytek_xinliang
44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<v-sheet class="mobile-menu-panel d-flex flex-column" color="surface">
|
|
<v-list class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable">
|
|
<v-list-item
|
|
v-for="item in mobileCurrentItems"
|
|
:key="item.path ?? item.title"
|
|
class="mb-1"
|
|
rounded="lg"
|
|
@click="emit('item-click', item)"
|
|
>
|
|
<v-list-item-title class="text-body-2">{{ item.title }}</v-list-item-title>
|
|
<template #append>
|
|
<v-icon size="18" :icon="item.subItems?.length ? mdiChevronRight : mdiArrowTopRight" />
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { AdminLayoutMenuItem } from './types'
|
|
import { mdiArrowTopRight, mdiChevronRight } from '@mdi/js'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
mobileCurrentItems?: AdminLayoutMenuItem[]
|
|
}>(),
|
|
{
|
|
mobileCurrentItems: () => [],
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
'item-click': [item: AdminLayoutMenuItem]
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mobile-menu-panel {
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
</style>
|