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