<template>
    <v-card
      class="mx-auto"
      width="256"
    >
      <v-layout>
        <v-navigation-drawer absolute permanent>
         <h1>Test</h1>
  
          <v-divider></v-divider>
  
          <v-list
            :lines="false"
            density="compact"
            nav
          >
            <v-list-item
              v-for="(item, i) in items"
              :key="i"
              :value="item"
              color="primary"
              
            >
              <template v-slot:prepend>
                <v-icon :icon="item.icon"></v-icon>
              </template>
  
           
            </v-list-item>
          </v-list>
        </v-navigation-drawer>
  
        <v-main style="height: 354px;"></v-main>
      </v-layout>
    </v-card>
  </template>
  
  <script setup>
    const items = [
      { text: 'My Files', icon: 'mdi-folder'  },
      { text: 'Shared with me', icon: 'mdi-account-multiple' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Recent', icon: 'mdi-history' },
      { text: 'Offline', icon: 'mdi-check-circle' },
      { text: 'Uploads', icon: 'mdi-upload' },
      { text: 'Backups', icon: 'mdi-cloud-upload' },
    ]
  </script>
  
  <script>
    export default {
      data: () => ({
        items: [
          { text: 'My Files', icon: 'mdi-folder' },
          { text: 'Shared with me', icon: 'mdi-account-multiple' },
          { text: 'Starred', icon: 'mdi-star' },
          { text: 'Recent', icon: 'mdi-history' },
          { text: 'Offline', icon: 'mdi-check-circle' },
          { text: 'Uploads', icon: 'mdi-upload' },
          { text: 'Backups', icon: 'mdi-cloud-upload' },
        ],
      }),
    }
  </script>