<script lang="ts" setup>
const pages = [
  {
    title: '教师',
    page: '/teachers',
  },
  {
    title: '事件',
    page: '/events',
  },
  {
    title: '文章',
    page: '/posts',
  },
  {
    title: '友链',
    page: '/friends',
  },
  {
    title: '关于',
    page: '/about',
  },
]

const { t } = useI18n()

const { isDark, toggleDark } = useDarkMode()
</script>

<template>
  <v-app-bar app 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-btn
      class="mx-2" :title="t('button.toggle_dark')" :icon="isDark() ? 'mdi-weather-night' : 'mdi-weather-sunny'"
      @click="toggleDark()"
    />

    <v-menu>
      <template #activator="{ props }">
        <v-app-bar-nav-icon v-bind="props" class="md:hidden!" />
      </template>

      <v-list :lines="false" density="compact" nav>
        <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>
