refactor(home): move change language to navbar menu

src/i18n/en/index.ts

@@ -67,6 +67,8 @@ const en = {
     create: 'Create',
     settings: 'Settings',
     account: 'Account',
+    language: 'Language',
+    english: 'English',
   },
   success: {
     action: '{module:string} successfully {action:string}',

src/i18n/i18n-types.ts

@@ -258,6 +258,14 @@ type RootTranslation = {
 		 * A​c​c​o​u​n​t
 		 */
 		account: string
+		/**
+		 * L​a​n​g​u​a​g​e
+		 */
+		language: string
+		/**
+		 * E​n​g​l​i​s​h
+		 */
+		english: string
 	}
 	success: {
 		/**
@@ -519,6 +527,14 @@ export type TranslationFunctions = {
 		 * Account
 		 */
 		account: () => LocalizedString
+		/**
+		 * Language
+		 */
+		language: () => LocalizedString
+		/**
+		 * English
+		 */
+		english: () => LocalizedString
 	}
 	success: {
 		/**

src/i18n/id/index.ts

@@ -67,6 +67,8 @@ const id = {
     create: 'Buat',
     settings: 'Pengaturan',
     account: 'Akun',
+    language: 'Bahasa',
+    english: 'Inggris',
   },
   success: {
     action: '{module} berhasil {action}',

src/modules/home/components/clock-section/clock-section.vue

@@ -6,13 +6,12 @@ import { useRouter } from 'vue-router'
 import { useIntervalFn } from '@vueuse/core'
 import ClockSectionTimer from '#home/components/clock-section/clock-section-timer.vue'
 import type { Translation } from '#i18n/i18n-types'
-import { loadLocale } from '#i18n/i18n-util.sync'
 import { typesafeI18n } from '#i18n/i18n-vue'
 import { todosRoute } from '#todo/routes'
 import FadeTransition from '#shared/components/fade-transition.vue'
 
 const { push } = useRouter()
-const { LL, locale, setLocale } = typesafeI18n()
+const { LL } = typesafeI18n()
 const showClock = ref(false)
 const time = ref(new Date())
 const buttons = ref([
@@ -26,11 +25,6 @@ const buttons = ref([
     severity: 'help',
     text: 'toggleClock' as keyof Translation['home'],
   },
-  {
-    id: 'language' as const,
-    severity: 'secondary',
-    text: 'changeLang' as keyof Translation['home'],
-  },
   {
     id: 'start' as const,
     severity: 'warning',
@@ -59,20 +53,13 @@ useIntervalFn(
 
   <TransitionGroup
     name="list" tag="ul"
-    class="mt-8 grid grid-cols-1 gap-2 p-0 duration-300 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+    class="mt-8 grid grid-cols-1 gap-2 duration-300 sm:grid-cols-3"
   >
     <Button
       v-for="btn in buttons" :key="btn.id" type="button" :label="LL.home[btn.text]()" :severity="btn.severity"
       :data-testid="`home-clock-button-${btn.id}`" @click="() => {
         if (btn.id === 'sort') buttons = shuffle(buttons)
         else if (btn.id === 'clock') showClock = !showClock
-        else if (btn.id === 'language') {
-          const newLocale = locale === 'en' ? 'id' : 'en'
-          // update dictionaries and update formatters
-          loadLocale(newLocale)
-          // change locale store
-          setLocale(newLocale)
-        }
         else void push(todosRoute.path)
       }"
     />

src/modules/shared/components/nav-bar/nav-bar-language-menu.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Button from 'primevue/button'
+import Menu from 'primevue/menu'
+import type { MenuItem } from 'primevue/menuitem'
+import { ref } from 'vue'
+import { useColorMode } from '@vueuse/core'
+import { typesafeI18n } from '#i18n/i18n-vue'
+import { loadLocale } from '#i18n/i18n-util.sync'
+
+const { LL, locale, setLocale } = typesafeI18n()
+const menuTheme = ref<InstanceType<typeof Menu> | null>(null)
+const menuItemsTheme = ref<MenuItem[]>([
+  {
+    label: LL.value.common.language(),
+    items: [
+      {
+        icon: 'flag:us-1x1',
+        label: LL.value.common.english(),
+        showEndIcon: locale.value === 'en', // FIXME: this is not reactive
+        command: () => {
+          // update dictionaries and update formatters
+          loadLocale('en')
+          // change locale store
+          setLocale('en')
+        },
+      },
+      {
+        icon: 'flag:id-1x1',
+        label: 'Indonesia',
+        showEndIcon: locale.value === 'id',
+        command: () => {
+          // update dictionaries and update formatters
+          loadLocale('id')
+          // change locale store
+          setLocale('id')
+        },
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <Button
+    aria-haspopup="true" aria-controls="menu-theme" @click="(evt) => {
+      menuTheme?.toggle(evt)
+    }"
+  >
+    <template #icon>
+      <Icon icon="lucide:globe" />
+    </template>
+  </Button>
+
+  <Menu id="menu-theme" ref="menuTheme" class="mt-2" :popup="true" :model="menuItemsTheme">
+    <template #item="{ item, props }">
+      <!-- IMPORTANT: wrapper needs to be an "a" tag for "command" to works -->
+      <a v-ripple class="flex items-center" v-bind="props.action">
+        <Icon class="mr-2" :icon="item.icon as string" />
+        <span class="mr-auto">{{ item.label }}</span>
+        <Icon v-if="item.showEndIcon" icon="lucide:check">{{ item.label }}</Icon>
+      </a>
+    </template>
+  </Menu>
+</template>

src/modules/shared/components/nav-bar/nav-bar-theme-menu.vue

@@ -42,14 +42,14 @@ const menuItemsTheme = ref<MenuItem[]>([
     ],
   },
 ])
-
-function toggleTheme(event: Event) {
-  menuTheme.value?.toggle(event)
-}
 </script>
 
 <template>
-  <Button aria-haspopup="true" aria-controls="menu-theme" @click="toggleTheme">
+  <Button
+    aria-haspopup="true" aria-controls="menu-theme" @click="(evt) => {
+      menuTheme?.toggle(evt)
+    }"
+  >
     <template #icon>
       <Icon icon="lucide:computer" />
     </template>

src/modules/shared/components/nav-bar/nav-bar.vue

@@ -14,12 +14,12 @@ import { todosRoute } from '#todo/routes'
 import NavBarSidebar from '#shared/components/nav-bar/nav-bar-sidebar.vue'
 import NavBarThemeMenu from '#shared/components/nav-bar/nav-bar-theme-menu.vue'
 import NavBarProfileMenu from '#shared/components/nav-bar/nav-bar-profile-menu.vue'
+import NavBarLanguageMenu from '#shared/components/nav-bar/nav-bar-language-menu.vue'
 import SvgIcon from '#shared/components/svg-icon.vue'
 
 const user = useUserStorage()
 const { LL } = typesafeI18n()
 const { replace } = useRouter()
-
 const visible = ref(false)
 const items = ref<MenuItem[]>([
   {
@@ -35,18 +35,15 @@ const items = ref<MenuItem[]>([
     route: playgroundRoute.path,
   },
 ])
-
-function logout(): void {
-  user.value = null // reset `user` store
-  replace(loginRoute.path) // back to login
-}
-function toggleSidebar() {
-  visible.value = true
-}
 </script>
 
 <template>
-  <NavBarSidebar v-model:visible="visible" @logout="logout" />
+  <NavBarSidebar
+    v-model:visible="visible" @logout="() => {
+      user = null // reset `user` store
+      replace(loginRoute.path) // back to login
+    }"
+  />
 
   <Menubar :model="items" :pt="{ root: 'rounded-none', popupIcon: 'hidden', button: 'hidden', menu: 'ml-auto' }">
     <template #start>
@@ -67,14 +64,19 @@ function toggleSidebar() {
     </template>
 
     <template #end>
-      <Button aria-label="Toggle Sidebar" class="sm:hidden" @click="toggleSidebar">
+      <Button
+        aria-label="Toggle Sidebar" class="sm:hidden" @click="() => {
+          visible = true
+        }"
+      >
         <template #icon>
           <Icon icon="lucide:menu" />
         </template>
       </Button>
 
       <div class="hidden items-center space-x-2 sm:flex">
         <NavBarThemeMenu />
+        <NavBarLanguageMenu />
         <NavBarProfileMenu />
       </div>
     </template>