<script setup lang="ts">
import { ref } from 'vue'

const component = ref<string>('issues')

const menu = ['stat', 'issues', 'projects', 'tests']

function setComponent(value: string) {
  component.value = value
}
</script>

<template>
  <v-layout>
    <v-app-bar density="compact" elevation="1">
      <v-app-bar-title>Application - component: {{ component }}</v-app-bar-title>
      <v-btn v-for="(el, index) in menu" :key="index" @click="setComponent(el)">{{ el }}</v-btn>
    </v-app-bar>
    <v-main>
      <v-container :fluid="true">
        <slot name="default" :component="component"></slot>
      </v-container>
    </v-main>
  </v-layout>
</template>

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