49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { shallowRef } from 'vue';
|
|
import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
|
|
const props = defineProps(['icon']);
|
|
const component = props.icon;
|
|
// List 1,3 Data
|
|
const list1 = shallowRef([
|
|
{
|
|
name: 'Sample Page',
|
|
icon: AppsIcon,
|
|
id: 1,
|
|
link: '/basic/list'
|
|
},
|
|
{
|
|
name: 'Elements',
|
|
icon: CircleDotIcon,
|
|
id: 2,
|
|
link: ''
|
|
},
|
|
{
|
|
name: 'Page Layouts',
|
|
icon: FolderIcon,
|
|
id: 3,
|
|
link: ''
|
|
},
|
|
{
|
|
name: 'Components',
|
|
icon: DragDropIcon,
|
|
id: 4,
|
|
link: ''
|
|
}
|
|
]);
|
|
|
|
</script>
|
|
<template>
|
|
|
|
<v-list>
|
|
<v-card variant="outlined" class="py-2">
|
|
<v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
|
|
<template v-slot:prepend>
|
|
<component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
|
|
</template>
|
|
<v-list-item-title v-text="list.name"></v-list-item-title>
|
|
</v-list-item>
|
|
</v-card>
|
|
</v-list>
|
|
|
|
</template>
|