fix(theme-press): i18n of menu in mobile

YunYouJun · Oct 4, 2023 · ebc881d · ebc881d · vercel · Oct 4, 2023
1 parent d18e70d
commit ebc881d
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 15 deletions.
diff --git a/packages/valaxy-theme-press/components/PressAside.vue b/packages/valaxy-theme-press/components/PressAside.vue
@@ -23,6 +23,7 @@ const app = useAppStore()
     p="l-0 xl:l-8" text="center"
     z="$"
     :class="app.isRightSidebarOpen && 'open'"
+    bg="$va-c-bg"
   >
     <div class="aside-curtain" />
     <div class="aside-container lt-xl:fixed" flex="~ col">

diff --git a/packages/valaxy-theme-press/components/PressLocalNav.vue b/packages/valaxy-theme-press/components/PressLocalNav.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { useSidebar } from 'valaxy'
 
+import { useI18n } from 'vue-i18n'
+
 defineProps<{
   open: boolean
 }>()
@@ -14,6 +16,8 @@ const { hasSidebar } = useSidebar()
 function scrollToTop() {
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -25,11 +29,13 @@ function scrollToTop() {
       @click="$emit('openMenu')"
     >
       <div i-ri-align-left class="menu-icon" />
-      <span class="menu-text">Menu</span>
+      <span class="menu-text">
+        {{ t('menu.title') }}
+      </span>
     </button>
 
     <a class="top-link" href="#" @click="scrollToTop">
-      Return to top
+      {{ t('sidebar.return_top') }}
     </a>
   </div>
 </template>

diff --git a/packages/valaxy-theme-press/components/PressNavItemLink.vue b/packages/valaxy-theme-press/components/PressNavItemLink.vue
@@ -1,12 +1,15 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import type { NavItemLink } from '../types'
 
 defineProps<{
   item: NavItemLink
 }>()
 
 const route = useRoute()
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -19,7 +22,7 @@ const route = useRoute()
     rel="noopener"
     show-external-icon
   >
-    {{ item.text }}
+    {{ t(item.text) }}
   </AppLink>
 </template>
 

diff --git a/packages/valaxy-theme-press/components/PressNavScreenAppearance.vue b/packages/valaxy-theme-press/components/PressNavScreenAppearance.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { useThemeConfig } from '../composables/config'
+import { useI18n } from 'vue-i18n'
 
-const themeConfig = useThemeConfig()
+const { t } = useI18n()
 </script>
 
 <template>
   <div class="pr-nav-screen-appearance" flex="~ 1">
     <p class="text">
-      {{ themeConfig.darkModeSwitchLabel || 'Appearance' }}
+      {{ t('button.appearance') }}
     </p>
     <PressSwitchAppearance />
   </div>

diff --git a/packages/valaxy-theme-press/components/PressNavScreenMenuGroup.vue b/packages/valaxy-theme-press/components/PressNavScreenMenuGroup.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
 const props = defineProps<{
   text: string
   items: any[]
@@ -12,6 +14,8 @@ const groupId = computed(() =>
   `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`,
 )
 
+const { t } = useI18n()
+
 function toggle() {
   isOpen.value = !isOpen.value
 }
@@ -25,7 +29,7 @@ function toggle() {
       :aria-expanded="isOpen"
       @click="toggle"
     >
-      <span class="button-text">{{ text }}</span>
+      <span class="button-text">{{ t(text) }}</span>
       <div i-ri-add-line class="button-icon" />
     </button>
 

diff --git a/packages/valaxy-theme-press/components/PressNavScreenMenuGroupLink.vue b/packages/valaxy-theme-press/components/PressNavScreenMenuGroupLink.vue
@@ -1,17 +1,21 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
 defineProps<{
   text: string
   link: string
 }>()
 
 const closeScreen = inject('close-screen') as () => void
+
+const { t } = useI18n()
 </script>
 
 <template>
   <AppLink class="pr-nav-screen-menu-group-link" :to="link" @click="closeScreen">
-    {{ text }}
+    {{ t(text) }}
   </AppLink>
 </template>
 

diff --git a/packages/valaxy-theme-press/types/index.d.ts b/packages/valaxy-theme-press/types/index.d.ts
@@ -56,12 +56,6 @@ export namespace PressTheme {
 
     socialLinks: SocialLink[]
 
-    // label
-    /**
-     * Toggle dark label
-     */
-    darkModeSwitchLabel?: string
-
     lastUpdatedText?: string
   }
 }

diff --git a/packages/valaxy-theme-yun/package.json b/packages/valaxy-theme-yun/package.json
@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.15.3",
+  "version": "0.15.3-alpha.0",
   "author": {
     "email": "[email protected]",
     "name": "YunYouJun",

diff --git a/packages/valaxy/client/locales/en.yml b/packages/valaxy/client/locales/en.yml
@@ -6,6 +6,7 @@ button:
   toggle_light: Switch to light mode
   toggle_dark: Switch to dark mode
   toggle_langs: Change languages
+  appearance: Appearance
 intro:
   desc: Theme Yun | Valaxy
   hi: Hi, {name}!
@@ -19,6 +20,7 @@ title:
   gallery: Gallery
 
 menu:
+  title: Menu
   home: Home
   archives: Archives
   categories: Categories
@@ -29,6 +31,7 @@ menu:
 sidebar:
   overview: Overview
   toc: Table of Contents
+  return_top: Return to top
 
 post:
   decrypt: DECRYPT

diff --git a/packages/valaxy/client/locales/zh-CN.yml b/packages/valaxy/client/locales/zh-CN.yml
@@ -6,6 +6,7 @@ button:
   toggle_light: 切换亮色模式
   toggle_dark: 切换深色模式
   toggle_langs: 切换语言
+  appearance: 外观
 intro:
   desc: 主题 Yun
   hi: 你好，{name}
@@ -19,6 +20,7 @@ title:
   gallery: 图片库
 
 menu:
+  title: 菜单
   home: 首页
   archives: 归档
   categories: 分类
@@ -29,6 +31,7 @@ menu:
 sidebar:
   overview: 站点概览
   toc: 文章目录
+  return_top: 返回顶部
 
 post:
   decrypt: 解密