feat: localizations

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

core/src/layouts/menus/LayoutSystemMenu.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useLayoutStore } from '@KTXC/stores/layoutStore';
 import { useIntegrationStore } from '@KTXC/stores/integrationStore';
+import { useL10n } from '@KTXC/composables/useL10n';
 import Logo from '@KTXC/layouts/logo/LogoDark.vue';
 import SystemMenuGroupStatic from './LayoutSystemMenuGroupStatic.vue';
 import SystemMenuGroupDynamic from './LayoutSystemMenuGroupDynamic.vue';
@@ -9,6 +10,7 @@ import SystemMenuItem from './LayoutSystemMenuItem.vue';
 
 const layoutStore = useLayoutStore();
 const integrationStore = useIntegrationStore();
+const { t } = useL10n('core');
 
 // Get all entries based on current menu mode
 const menuEntries = computed(() => {
@@ -29,23 +31,23 @@ const menuModeInfo = computed(() => {
     case 'user-settings':
       return {
         icon: 'mdi-account-cog',
-        label: 'Personal Settings',
-        toggleLabel: 'Admin',
+        label: t('systemMenu.personalSettings', 'Settings'),
+        toggleLabel: t('systemMenu.adminSettings', 'System'),
         toggleIcon: 'mdi-shield-crown',
       };
     case 'admin-settings':
       return {
         icon: 'mdi-shield-crown',
-        label: 'Administration',
-        toggleLabel: 'Apps',
+        label: t('systemMenu.adminSettings', 'System'),
+        toggleLabel: t('systemMenu.apps', 'Applications'),
         toggleIcon: 'mdi-view-dashboard',
       };
     case 'apps':
     default:
       return {
         icon: 'mdi-view-dashboard',
-        label: 'Applications',
-        toggleLabel: 'Settings',
+        label: t('systemMenu.apps', 'Applications'),
+        toggleLabel: t('systemMenu.userSettings', 'Settings'),
         toggleIcon: 'mdi-account-cog',
       };
   }

core/src/layouts/menus/LayoutSystemMenuGroupDynamic.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { IntegrationGroup } from '@KTXC/types/integrationTypes';
+import { t } from '@KTXC/composables/useL10n';
 import NavItem from './LayoutSystemMenuItem.vue';
 
 const props = defineProps<{ group: IntegrationGroup; level?: number }>();
@@ -20,7 +21,7 @@ const props = defineProps<{ group: IntegrationGroup; level?: number }>();
           <v-icon v-if="group.icon" :icon="group.icon"></v-icon>
         </template>
         <!---Title  -->
-        <v-list-item-title class="mr-auto">{{ group.label }}</v-list-item-title>
+        <v-list-item-title class="mr-auto">{{ t(group.l10n, group.label) }}</v-list-item-title>
         <!---If Caption-->
         <v-list-item-subtitle v-if="group.caption" class="text-caption mt-n1 hide-menu">
           {{ group.caption }}

core/src/layouts/menus/LayoutSystemMenuGroupStatic.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { IntegrationGroup } from '@KTXC/types/integrationTypes';
+import { t } from '@KTXC/composables/useL10n';
 import LayoutSystemMenuItem from './LayoutSystemMenuItem.vue';
 
 const props = defineProps<{ group: IntegrationGroup }>();
 </script>
 
 <template>
-  <v-list-subheader color="lightText" class="smallCap text-subtitle-2">{{ props.group.label }}</v-list-subheader>
+  <v-list-subheader color="lightText" class="smallCap text-subtitle-2">{{ t(props.group.l10n, props.group.label) }}</v-list-subheader>
   <LayoutSystemMenuItem
     v-for="(item, i) in props.group.items"
     :key="i"

core/src/layouts/menus/LayoutSystemMenuItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { IntegrationItem } from '@KTXC/types/integrationTypes';
+import { t } from '@KTXC/composables/useL10n';
 
 const props = defineProps<{ item: IntegrationItem; level?: number }>();
 </script>
@@ -20,7 +21,7 @@ const props = defineProps<{ item: IntegrationItem; level?: number }>();
     <template v-slot:prepend>
       <v-icon v-if="props.item.icon" :icon="props.item.icon"></v-icon>
     </template>
-    <v-list-item-title>{{ item.label }}</v-list-item-title>
+    <v-list-item-title>{{ t(item.l10n, item.label) }}</v-list-item-title>
     <!---If Caption-->
     <v-list-item-subtitle v-if="item.caption" class="text-caption mt-n1 hide-menu">
       {{ item.caption }}

core/src/layouts/menus/LayoutUserMenu.vue

@@ -5,8 +5,11 @@ import { useUserStore } from '@KTXC/stores/userStore';
 import { useIntegrationStore } from '@KTXC/stores/integrationStore';
 import { useLayoutStore } from '@KTXC/stores/layoutStore';
 import { useRouter } from 'vue-router';
+import { useL10n, t as tGlobal } from '@KTXC/composables/useL10n';
 import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
 
+const { t } = useL10n('core');
+
 const theme = useTheme();
 const router = useRouter();
 const userStore = useUserStore();
@@ -74,7 +77,7 @@ const goToSettings = () => {
           <template v-slot:prepend>
             <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
           </template>
-          <v-list-item-title class="text-h6">{{ item.label }}</v-list-item-title>
+          <v-list-item-title class="text-h6">{{ tGlobal(item.l10n, item.label) }}</v-list-item-title>
         </v-list-item>
 
         <v-divider v-if="profileMenuItems.length" class="my-2" />
@@ -84,7 +87,7 @@ const goToSettings = () => {
           <template v-slot:prepend>
             <v-icon>{{ isDarkMode ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
           </template>
-          <v-list-item-title class="text-h6">{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</v-list-item-title>
+          <v-list-item-title class="text-h6">{{ isDarkMode ? t('userMenu.lightMode', 'Light Mode') : t('userMenu.darkMode', 'Dark Mode') }}</v-list-item-title>
         </v-list-item>
 
         <!-- Go to Settings -->
@@ -92,7 +95,7 @@ const goToSettings = () => {
           <template v-slot:prepend>
             <v-icon>mdi-cog-outline</v-icon>
           </template>
-          <v-list-item-title class="text-h6">Settings</v-list-item-title>
+          <v-list-item-title class="text-h6">{{ t('userMenu.settings', 'Settings') }}</v-list-item-title>
         </v-list-item>
 
         <v-divider class="my-2" />
@@ -102,7 +105,7 @@ const goToSettings = () => {
           <template v-slot:prepend>
             <v-icon>mdi-logout</v-icon>
           </template>
-          <v-list-item-title class="text-h6">Logout</v-list-item-title>
+          <v-list-item-title class="text-h6">{{ t('userMenu.logout', 'Logout') }}</v-list-item-title>
         </v-list-item>
       </v-list>
     </perfect-scrollbar>