<script lang="ts">
export default {
  data: () => ({
    pages: [
      {
        title: '教师',
        page: '/teachers',
      },
      {
        title: '事件',
        page: '/events',
      },
      {
        title: '文章',
        page: '/posts',
      },
      {
        title: '关于',
        page: '/about',
      },
    ],
  }),
}
</script>

<template>
  <v-app-bar class="!static">
    <img class="mx-3 w-40px" src="/favicon.svg">

    <router-link to="/">
      <v-toolbar-title class="font-bold">
        合肥市南园学校19预科2班
      </v-toolbar-title>
    </router-link>

    <div class="mx-1 hidden md:block">
      <v-btn v-for="(page, index) in pages" :key="index" class="m-1" :to="page.page">
        {{ page.title }}
      </v-btn>
    </div>

    <v-spacer />

    <v-menu>
      <template #activator="{ props }">
        <v-app-bar-nav-icon v-bind="props" class="md:hidden!" />
      </template>
      <v-list>
        <v-list-item v-for="(page, index) in pages" :key="index" :value="index" :to="page.page">
          <v-list-item-title>{{ page.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-app-bar>
</template>
