CameraModuleToolWeb/src/components/HeaderTool.vue

<script setup lang="ts">
import { useLocale, useTheme } from 'vuetify'
import { availableLocales, loadLanguageAsync } from '~/modules/i18n'

const { t, locale } = useI18n()
const { current } = useLocale()
const theme = useTheme()

function toggleTheme() {
  toggleDark()
  theme.global.name.value = isDark.value ? 'light' : 'dark'
}
async function toggleLocales() {
  // change to some real logic
  const locales = availableLocales
  const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
  await loadLanguageAsync(newLocale)
  locale.value = newLocale
  current.value = newLocale === 'zh-CN' ? 'zhHans' : newLocale
}
</script>

<template>
  <nav flex="~ gap-4" justify-center text-xl>
    <!-- <RouterLink icon-btn to="/" :title="t('button.home')">
      <div i-carbon-campsite />
    </RouterLink> -->

    <button icon-btn :title="t('button.toggle_dark')" @click="toggleTheme">
      <div i="carbon-sun dark:carbon-moon" />
    </button>

    <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
      <div i-carbon-language />
    </a>

    <!-- <RouterLink icon-btn to="/about" :title="t('button.about')" data-test-id="about">
      <div i-carbon-dicom-overlay />
    </RouterLink>

    <a icon-btn rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
      <div i-carbon-logo-github />
    </a> -->
  </nav>
</template>