<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const menu = [
  { id: 1, title: 'Projects' },
  // { id: 2, title: 'issues' },
  // { id: 3, title: 'stat' },
  // { id: 4, title: 'test' },
]
</script>

<template>
  <v-layout>
    <v-app-bar density="comfortable" elevation="1">
      <template v-slot:prepend>
        <v-menu>
          <template v-slot:activator="{ props }">
            <v-app-bar-nav-icon variant="text" v-bind="props"></v-app-bar-nav-icon>
          </template>
          <v-list class="mt-1" width="200">
            <v-list-item v-for="(item, index) in menu" :key="index" :to="`/${item.title}`">
              <v-list-item-title class="d-flex align-center ga-4">
                <v-avatar border size="24" rounded color="primary"> </v-avatar>
                <div>{{ item.title }}</div>
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </template>

      <v-app-bar-title>Application</v-app-bar-title>
    </v-app-bar>
    <v-main>
      <v-container :fluid="true">
        <slot></slot>
      </v-container>
    </v-main>
  </v-layout>
</template>

<style scoped lang="scss"></style>
