nocodb/packages/nc-gui/components/general/language/Menu.vue

<script lang="ts" setup>
import { Language } from '~/lib'
import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
import { setI18nLanguage } from '~/plugins/a.i18n'

const { $e } = useNuxtApp()

const { lang: currentLang } = useGlobal()

const { locale } = useI18n()

const languages = $computed(() => Object.entries(Language).sort())

const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))

function applyDirection() {
  const targetDirection = isRtlLang ? 'rtl' : 'ltr'
  const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'

  document.body.classList.remove(oppositeDirection)
  document.body.classList.add(targetDirection)
  document.body.style.direction = targetDirection
}

async function changeLanguage(lang: string) {
  const nextLang = lang as keyof typeof Language

  await setI18nLanguage(nextLang)
  currentLang.value = nextLang

  applyDirection()

  $e('c:navbar:lang', { lang })
}

onMounted(() => {
  applyDirection()
})
</script>

<template>
  <a-menu-item class="mt-1 group">
    <a
      href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
      target="_blank"
      class="caption nc-project-menu-item py-2 text-primary underline hover:opacity-75"
    >
      {{ $t('activity.translate') }}
    </a>
  </a-menu-item>

  <a-menu-item
    v-for="[key, lang] of languages"
    :key="key"
    :class="key === locale ? '!bg-primary bg-opacity-10 text-primary' : ''"
    class="group"
    :value="key"
    @click="changeLanguage(key)"
  >
    <div :class="key === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
      {{ Language[key] || lang }}
    </div>
  </a-menu-item>
</template>