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

<template>
  <v-app-bar :theme="isDark ? 'dark' : 'light'" 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-app-bar-nav-icon class="md:hidden" />
  </v-app-bar>
</template>
