doccano/frontend/components/layout/LocaleMenu.vue

<template>
  <v-menu
    open-on-hover
    offset-y
  >
    <template #activator="{ on }">
      <v-btn
        text
        v-on="on"
      >
        {{ $i18n.locale }}
        <v-icon>{{ mdiMenuDown }}</v-icon>
      </v-btn>
    </template>
    <v-list
      v-for="locale in $i18n.locales"
      :key="locale.code"
    >
      <nuxt-link
        class="v-list-item v-list-item--link"
        :class="$vuetify.theme.dark ? 'theme--dark' : 'theme--light'"
        :to="switchLocalePath(locale.code)"
      >
        {{ locale.name }}
      </nuxt-link>
    </v-list>
  </v-menu>
</template>

<script lang="ts">
import Vue from 'vue'
import { mdiMenuDown } from '@mdi/js'

export default Vue.extend({
  data() {
    return {
      mdiMenuDown
    }
  }
})
</script>