fix(theme): locales selector not rendering correctly on mobile, close #640 (#641)

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">

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>

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,