<template>
  <v-app-bar app :elevation="2">
  <template v-slot:prepend>
      <v-app-bar-nav-icon @click="$emit('toggle-drawer')"></v-app-bar-nav-icon>
  </template>
  <template v-slot:append>
    <!-- ≥600px 显示完整按钮 -->
    <v-btn icon class="d-none d-sm-flex" :title="$t('components.appHeader.search.button')">
        <v-icon>mdi-magnify</v-icon>
    </v-btn>
    <v-btn icon class="d-none d-sm-flex" :title="$t('components.appHeader.notifications.button')">
        <v-icon>mdi-bell</v-icon>
    </v-btn>
    <LanguageSwitcher class="mr-2 d-none d-sm-inline-flex" />
    <v-btn icon @click="$emit('logout')" class="d-none d-sm-flex" :title="$t('components.appHeader.user.logout')">
        <v-icon>mdi-logout</v-icon>
    </v-btn>

    <!-- <600px overflow 菜单 -->
    <v-menu class="d-flex d-sm-none">
      <template v-slot:activator="{ props }">
        <v-btn icon v-bind="props" :title="$t('components.appHeader.moreMenu')">
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item prepend-icon="mdi-magnify" :title="$t('components.appHeader.search.button')" />
        <v-list-item prepend-icon="mdi-bell" :title="$t('components.appHeader.notifications.button')" />
        <v-list-item>
          <LanguageSwitcher />
        </v-list-item>
        <v-list-item prepend-icon="mdi-logout"
          :title="$t('components.appHeader.user.logout')"
          @click="$emit('logout')" />
      </v-list>
    </v-menu>
  </template>

  <v-app-bar-title>{{ $t('components.appHeader.title') }}</v-app-bar-title>
  </v-app-bar>
</template>

<script setup>
import LanguageSwitcher from './LanguageSwitcher.vue'
</script>

<style scoped>

</style>
