ini punya ahdan

layouts/default.vue

@@ -0,0 +1,81 @@
+<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>