81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<v-navigation-drawer app v-model="drawer.data" temporary color="light" :width="300">
|
|
<v-list>
|
|
<v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>
|
|
|
|
<v-list-group value="Users">
|
|
<template v-slot:activator="{ props }">
|
|
<v-list-item
|
|
v-bind="props"
|
|
prepend-icon="mdi-account-circle"
|
|
title="Users"
|
|
></v-list-item>
|
|
</template>
|
|
|
|
<v-list-group value="Admin">
|
|
<template v-slot:activator="{ props }">
|
|
<v-list-item
|
|
v-bind="props"
|
|
title="Admin"
|
|
></v-list-item>
|
|
</template>
|
|
|
|
<v-list-item
|
|
v-for="([title, icon], i) in admins"
|
|
:key="i"
|
|
:prepend-icon="icon"
|
|
:title="title"
|
|
:value="title"
|
|
></v-list-item>
|
|
</v-list-group>
|
|
|
|
<v-list-group value="Actions">
|
|
<template v-slot:activator="{ props }">
|
|
<v-list-item
|
|
v-bind="props"
|
|
title="Actions"
|
|
></v-list-item>
|
|
</template>
|
|
|
|
<v-list-item
|
|
v-for="([title, icon], i) in cruds"
|
|
:key="i"
|
|
:prepend-icon="icon"
|
|
:title="title"
|
|
:value="title"
|
|
></v-list-item>
|
|
</v-list-group>
|
|
</v-list-group>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Link } from "#build/components";
|
|
import {reactive} from "vue";
|
|
const drawer = reactive({
|
|
data:false
|
|
})
|
|
|
|
|
|
const toggleDrawer = () => {
|
|
if (drawer.data == true) {
|
|
drawer.data=false
|
|
}else{
|
|
drawer.data=true;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const admins= [
|
|
['Management', 'mdi-account-multiple-outline','/'],
|
|
['Settings', 'mdi-cog-outline'],
|
|
];
|
|
const cruds= [
|
|
['Create', 'mdi-plus-outline'],
|
|
['Read', 'mdi-file-outline'],
|
|
['Update', 'mdi-update'],
|
|
['Delete', 'mdi-delete'],
|
|
];
|
|
</script> |