From 57d08bd501dca702f00dfd618cfb78f3506a9630 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 8 Jul 2025 14:26:51 +0800
Subject: [PATCH] fix(theme): locales selector not rendering correctly on
 mobile, close #640 (#641)

---
 theme/src/client/components/Nav/VPNavBarTranslations.vue    | 4 ++--
 theme/src/client/components/Nav/VPNavScreenTranslations.vue | 6 +++---
 theme/src/client/composables/langs.ts                       | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/theme/src/client/components/Nav/VPNavBarTranslations.vue b/theme/src/client/components/Nav/VPNavBarTranslations.vue
index 0b1244d2..fde4e88e 100644
--- a/theme/src/client/components/Nav/VPNavBarTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavBarTranslations.vue
@@ -9,14 +9,14 @@ const { currentLang, localeLinks } = useLangs()
 
 <template>
   <VPFlyout
-    v-if="localeLinks.length && currentLang.label"
+    v-if="localeLinks.length && currentLang.text"
     class="vp-navbar-translations"
     icon="vpi-languages"
     :label="theme.selectLanguageText || 'Change Language'"
   >
     <div class="items">
       <p class="title">
-        {{ currentLang.label }}
+        {{ currentLang.text }}
       </p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
diff --git a/theme/src/client/components/Nav/VPNavScreenTranslations.vue b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
index 28ab29b0..b53b354c 100644
--- a/theme/src/client/components/Nav/VPNavScreenTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
@@ -16,13 +16,13 @@ function toggle() {
 
 <template>
   <div
-    v-if="localeLinks.length && currentLang.label"
+    v-if="localeLinks.length && currentLang.text"
     class="vp-nav-screen-translations"
     :class="{ open: isOpen }"
   >
     <button class="title" @click="toggle">
       <span class="vpi-languages icon lang" />
-      {{ currentLang.label }}
+      {{ currentLang.text }}
       <span class="vpi-chevron-down icon chevron" />
     </button>
 
@@ -31,7 +31,7 @@ function toggle() {
         <ul class="list">
           <li v-for="locale in localeLinks" :key="locale.link" class="item">
             <VPLink class="link" :href="locale.link">
-              {{ locale.label }}
+              {{ locale.text }}
             </VPLink>
           </li>
         </ul>
diff --git a/theme/src/client/composables/langs.ts b/theme/src/client/composables/langs.ts
index c241173b..ec572107 100644
--- a/theme/src/client/composables/langs.ts
+++ b/theme/src/client/composables/langs.ts
@@ -8,7 +8,7 @@ import { useBlogPageData } from './page.js'
 import { useThemeData } from './theme-data.js'
 
 interface Lang {
-  label?: string
+  text?: string
   link: string
 }
 
@@ -32,7 +32,7 @@ export function useLangs({
   const currentLang = computed(() => {
     const link = routeLocale.value
     return {
-      label: theme.value.locales?.[link]?.selectLanguageName,
+      text: theme.value.locales?.[link]?.selectLanguageName,
       link,
     }
   })
@@ -67,7 +67,7 @@ export function useLangs({
 
   const localeLinks = computed(() =>
     Object.entries(theme.value.locales || {}).flatMap(([key, locale]) =>
-      removeCurrent && currentLang.value.label === locale.selectLanguageName
+      removeCurrent && currentLang.value.text === locale.selectLanguageName
         ? []
         : {
             text: locale.selectLanguageName,