Integrate i18n

src/views/main/Header.vue

@@ -70,6 +70,9 @@
 
       <v-icon class="mx-2">mdi-bell-outline</v-icon>
 
+      <v-btn variant="text"  @click="changeLanguage('fr')">Français</v-btn>
+      <v-btn variant="text" class="mx-2" @click="changeLanguage('en')">English</v-btn>
+
       <div class="text-center">
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
@@ -138,7 +141,9 @@ import {useRouter} from 'vue-router';
 import {useSideBarStore} from '@/stores/sideBarStore.js';
 import {useUserStore} from "@/stores/userStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
+import { useI18n } from 'vue-i18n';
 
+const { locale } = useI18n();
 const authStore = useAuthStore()
 const userStore = useUserStore()
 const sideBarStore = useSideBarStore()
@@ -147,6 +152,14 @@ const router = useRouter();
 const searchQuery = ref("");
 const showSearch = ref(false);
 
+// List of available languages
+const selectedLanguage = ref(locale.value);
+
+function changeLanguage(lang) {
+  locale.value = lang;
+  selectedLanguage.value = lang;
+}
+
 const onSearch = () => {
   const query = searchQuery.value.trim();
   if (!query) {