<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>
