Added frontend localization

frontend/src/components/Navigation.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import {Calendar, Heart, Home, Sparkles, Wallet} from 'lucide-vue-next';
+import { computed, type Component } from 'vue';
+import { useI18n } from '../i18n';
 
 interface NavItem {
-  icon: unknown;
-  label: string;
+  icon: Component;
+  labelKey: string;
   id: string;
 }
 
@@ -14,14 +16,22 @@ const props = defineProps<{
 const emit = defineEmits<{
   navigate: [screen: string];
 }>();
+const { t } = useI18n();
 
 const navItems: NavItem[] = [
-  { icon: Calendar, label: 'Calendar', id: 'calendar' },
-  { icon: Wallet, label: 'Finance', id: 'finance' },
-  { icon: Home, label: 'Home', id: 'home' },
-  { icon: Heart, label: 'Votes', id: 'votes' },
-  { icon: Sparkles, label: 'Intimacy', id: 'intimacy' },
+  { icon: Calendar, labelKey: 'nav.calendar', id: 'calendar' },
+  { icon: Wallet, labelKey: 'nav.finance', id: 'finance' },
+  { icon: Home, labelKey: 'nav.home', id: 'home' },
+  { icon: Heart, labelKey: 'nav.votes', id: 'votes' },
+  { icon: Sparkles, labelKey: 'nav.intimacy', id: 'intimacy' },
 ];
+
+const localizedNavItems = computed(() =>
+  navItems.map((item) => ({
+    ...item,
+    label: t(item.labelKey),
+  })),
+);
 </script>
 
 <template>
@@ -29,7 +39,7 @@ const navItems: NavItem[] = [
     <div class="pointer-events-auto rounded-[20px] border border-white/[0.08] bg-[#1A1A24]/95 px-2 py-3 shadow-[0_8px_32px_rgba(0,0,0,0.6)] backdrop-blur-xl">
       <div class="flex items-center justify-between">
         <button
-          v-for="item in navItems"
+          v-for="item in localizedNavItems"
           :key="item.id"
           type="button"
           @click="emit('navigate', item.id)"