Translation of pages

src/views/main/Header.vue

@@ -7,7 +7,16 @@
       <v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
       </v-app-bar-nav-icon>
 
-      <RouterLink to="/">
+      <RouterLink class="d-sm-block d-md-block d-lg-none" to="/">
+        <v-img
+            src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
+            ref="popupButtonRef"
+            alt="Hutopy Logo"
+            class="w-10"
+        ></v-img>
+      </RouterLink>
+
+      <RouterLink class="d-none d-lg-flex" to="/">
         <v-img
             src="/medias/hutopy.png"
             ref="popupButtonRef"
@@ -68,7 +77,9 @@
         <v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon>
       </template>
 
-      <v-icon class="mx-2">mdi-bell-outline</v-icon>
+      <v-btn variant="text" style="margin:0" @click="toggleLanguage">
+        {{ selectedLanguage === 'fr' ? 'Fr' : 'Eng' }}
+      </v-btn>
 
       <v-btn variant="text"  @click="changeLanguage('fr')">Français</v-btn>
       <v-btn variant="text" class="mx-2" @click="changeLanguage('en')">English</v-btn>
@@ -136,28 +147,28 @@
 </template>
 
 <script setup>
-import {ref, onBeforeUnmount, onBeforeMount} from "vue";
-import {useRouter} from 'vue-router';
-import {useSideBarStore} from '@/stores/sideBarStore.js';
-import {useUserStore} from "@/stores/userStore.js";
-import {useAuthStore} from "@/stores/authStore.js";
+import { ref, onBeforeUnmount, onBeforeMount } from "vue";
+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()
+const authStore = useAuthStore();
+const userStore = useUserStore();
+const sideBarStore = useSideBarStore();
 
 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;
+function toggleLanguage() {
+  const newLang = selectedLanguage.value === 'fr' ? 'en' : 'fr';
+  locale.value = newLang;
+  selectedLanguage.value = newLang;
 }
 
 const onSearch = () => {
@@ -169,7 +180,7 @@ const onSearch = () => {
     if (words.length === 1) {
       router.push(`/@${words[0]}`);
     } else {
-      router.push({name: "browse", query: {q: query}});
+      router.push({ name: "browse", query: { q: query } });
     }
   }
 };