Translation of pages

src/locales/en.json

@@ -28,4 +28,4 @@
     "accountmanagement": "Account Management",
     "security": "security"
   }
-}
+}

src/locales/fr.json

@@ -28,5 +28,4 @@
     "accountmanagement": "Gestion de comptes",
     "security": "Sécurité"
   }
-  
-}
+}

src/views/creators/SubscribeButton.vue

@@ -32,7 +32,7 @@ function unsubscribeFromCreator() {
         @click="subscribeToCreator"
         color="white"
     >
-      S'ABONNER
+      {{ $t('subscribebutton.subscribe') }}
     </v-btn>
   </template>
 
@@ -44,7 +44,7 @@ function unsubscribeFromCreator() {
         style="transition: background-color 0.3s ease;"
         color="white"
     >
-      SE DESABONNER
+      {{ $t('subscribebutton.unsubscribe') }}
     </v-btn>
   </template>
 

src/views/creators/banner/bannerlower/BannerActionsLg.vue

@@ -19,7 +19,7 @@
           <div class="ml-60 text-white mr-10">
             <div>
               <p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
-              <div>{{ creator.subscriberCount }} Abonnés</div>
+              <div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
             </div>
           </div>
 

src/views/creators/banner/bannerlower/BannerActionsMd.vue

@@ -19,7 +19,7 @@
             <div class="flex justify-between">
               <div>
                 <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
-                <div>{{ creator.subscriberCount }} Abonnés</div>
+                <div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
                 
               </div>
               <div class="flex items-center">

src/views/creators/banner/bannerlower/BannerActionsSm.vue

@@ -19,7 +19,7 @@
 
           <div class="flex flex-column text-white capitalize px-2 mt-1">
             <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
-            <div>{{ creator.subscriberCount }} Abonnés</div>
+            <div>{{ creator.subscriberCount }} {{ $t('banner.subscription')}}</div>
           </div>
 
           <div class="flex ml-auto text-right text-white text-lg px-3 mt-2">

src/views/creators/banner/bannerlower/BannerActionsXl.vue

@@ -19,7 +19,7 @@
           <div class="ml-60 text-white mr-10">
             <div>
               <p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
-              <div>{{ creator.subscriberCount }} Abonnés</div>
+              <div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
             </div>
           </div>
 

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 } });
     }
   }
 };

src/views/main/SideBar.vue

@@ -12,8 +12,8 @@ const authStore = useAuthStore()
     <nav class="h-full grid grid-rows-[60px_1fr_auto]">
       <div></div>
 
-      <div v-if="authStore.isAuthenticated" class="pt-4 px-4">
-        <h2>Abonnements</h2>
+      <div v-if="authStore.isAuthenticated" class="pt-4 px-5">
+         {{ $t('sidebar.subscriptionTitle') }}
         <subscription-list>
           <template v-slot:default>
             <span>Aucun abonnement</span>

src/views/main/SiteMenu.vue

@@ -17,17 +17,17 @@
     </div>
 
     <div class="py-4">
-      <RouterLink class="nav-button font-weight-bold" to="/join">Aidez-nous</RouterLink>
+      <RouterLink class="nav-button font-weight-bold" to="/join">{{ $t('sitemenu.HelpUs') }}</RouterLink>
     </div>
     
     <div class="text-center ">
-      <RouterLink class="nav-button" to="/helpandcontact">Aide & Contact</RouterLink>
-      <RouterLink class="nav-button" to="/faq">FAQ</RouterLink>
-      <RouterLink class="nav-button" to="/guideforcreators">Guide pour les créateurs</RouterLink>
-      <RouterLink class="nav-button" to="/termsandconditions">Conditions générales</RouterLink>
-      <RouterLink class="nav-button" to="/contentpolicy">Politique de Contenu</RouterLink>
-      <RouterLink class="nav-button" to="/about">À Propos</RouterLink>
-      <RouterLink class="nav-button" to="/pricing">Frais</RouterLink>
+      <RouterLink class="nav-button" to="/helpandcontact">{{ $t('sitemenu.HelpAndContact') }}</RouterLink>
+      <RouterLink class="nav-button" to="/faq">{{ $t('sitemenu.FAQ') }}</RouterLink>
+      <RouterLink class="nav-button" to="/guideforcreators">{{ $t('sitemenu.CreatorGuide') }}</RouterLink>
+      <RouterLink class="nav-button" to="/termsandconditions">{{ $t('sitemenu.TermsAndConditions') }}</RouterLink>
+      <RouterLink class="nav-button" to="/contentpolicy">{{ $t('sitemenu.ContentPolicy') }}</RouterLink>
+      <RouterLink class="nav-button" to="/about">{{ $t('sitemenu.About') }}</RouterLink>
+      <RouterLink class="nav-button" to="/pricing">{{ $t('sitemenu.Pricing') }}</RouterLink>
     </div>
   </div>
 </template>