91 lines
1.5 KiB
Vue
91 lines
1.5 KiB
Vue
|
<script setup>
|
||
|
|
const open = ref([
|
||
|
|
'Users',
|
||
|
|
'Admin',
|
||
|
|
])
|
||
|
|
|
||
|
|
const admins = [
|
||
|
|
[
|
||
|
|
'Management',
|
||
|
|
'tabler-users',
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'Settings',
|
||
|
|
'tabler-settings',
|
||
|
|
],
|
||
|
|
]
|
||
|
|
|
||
|
|
const cruds = [
|
||
|
|
[
|
||
|
|
'Create',
|
||
|
|
'tabler-plus',
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'Read',
|
||
|
|
'tabler-file',
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'Update',
|
||
|
|
'tabler-reload',
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'Delete',
|
||
|
|
'tabler-trash',
|
||
|
|
],
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<VList v-model:opened="open">
|
||
|
|
<VListItem
|
||
|
|
prepend-icon="tabler-home"
|
||
|
|
title="Home"
|
||
|
|
value="Home"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<VListGroup value="Users">
|
||
|
|
<template #activator="{ props }">
|
||
|
|
<VListItem
|
||
|
|
v-bind="props"
|
||
|
|
prepend-icon="tabler-users"
|
||
|
|
title="Users"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<VListGroup value="Admin">
|
||
|
|
<template #activator="{ props }">
|
||
|
|
<VListItem
|
||
|
|
v-bind="props"
|
||
|
|
title="Admin"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<VListItem
|
||
|
|
v-for="([title, icon], i) in admins"
|
||
|
|
:key="i"
|
||
|
|
:value="title"
|
||
|
|
:title="title"
|
||
|
|
:prepend-icon="icon"
|
||
|
|
/>
|
||
|
|
</VListGroup>
|
||
|
|
|
||
|
|
<VListGroup value="Actions">
|
||
|
|
<template #activator="{ props }">
|
||
|
|
<VListItem
|
||
|
|
v-bind="props"
|
||
|
|
title="Actions"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<VListItem
|
||
|
|
v-for="([title, icon], i) in cruds"
|
||
|
|
:key="i"
|
||
|
|
:value="title"
|
||
|
|
:title="title"
|
||
|
|
:prepend-icon="icon"
|
||
|
|
/>
|
||
|
|
</VListGroup>
|
||
|
|
</VListGroup>
|
||
|
|
</VList>
|
||
|
|
</template>
|