Is hutopy finally trilangual

frontend/src/views/main/SideBar.vue

@@ -3,11 +3,9 @@ import {useI18n} from "vue-i18n";
 import {useAuthStore} from "@/stores/authStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
-import { useTranslations } from '@/translations/translations'
 import {useLanguageStore} from "@/stores/languageStore.js";
 
-const {locale} = useI18n();
-const t = useTranslations();
+const {locale, t} = useI18n();
 const languageStore = useLanguageStore();
 
 const userProfileStore = useUserProfileStore();
@@ -62,13 +60,13 @@ function toggleLanguage() {
           <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.slug}`">
             <button class="menu-item-action">
               <i class="mdi mdi-file-account-outline"></i>
-              <span class="label">{{ t('myPage') }}</span>
+              <span class="label">{{ t('sidebar.myPage') }}</span>
             </button>
           </router-link>
           <router-link v-else to="/create-creator">
             <button class="menu-item-action">
               <i class="mdi mdi-file-account-outline"></i>
-              <span class="label">{{ t('myPage') }}</span>
+              <span class="label">{{ t('sidebar.myPage') }}</span>
             </button>
           </router-link>
         </template>
@@ -77,7 +75,7 @@ function toggleLanguage() {
           <router-link to="/profile">
             <button class="menu-item-action">
               <i class="mdi mdi-account"></i>
-              <span class="label">{{ t('myProfile') }}</span>
+              <span class="label">{{ t('sidebar.myProfile') }}</span>
             </button>
           </router-link>
         </template>
@@ -92,7 +90,7 @@ function toggleLanguage() {
           <router-link to="/login">
             <button class="menu-item-action">
               <i class="mdi mdi-login"></i>
-              <span class="label">{{ t('signIn') }}</span>
+              <span class="label">{{ t('sidebar.signIn') }}</span>
             </button>
           </router-link>
         </template>
@@ -100,7 +98,7 @@ function toggleLanguage() {
           <button class="menu-item-action"
                   @click="authStore.logout">
             <i class="mdi mdi-logout"></i>
-            <span class="label">{{ t('signOut') }}</span>
+            <span class="label">{{ t('sidebar.signOut') }}</span>
           </button>
         </div>
 
@@ -161,4 +159,33 @@ function toggleLanguage() {
   @apply w-10 h-10 justify-center lg:w-full lg:h-auto lg:justify-normal;
 }
 
-</style>
+</style>
+
+<i18n>
+{
+  "en": {
+    "sidebar": {
+      "myPage": "My Page",
+      "myProfile": "My Profile",
+      "signIn": "Sign In",
+      "signOut": "Sign Out"
+    }
+  },
+  "fr": {
+    "sidebar": {
+      "myPage": "Ma Page",
+      "myProfile": "Mon Profil",
+      "signIn": "Se Connecter",
+      "signOut": "Se Déconnecter"
+    }
+  },
+  "es": {
+    "sidebar": {
+      "myPage": "Mi Página",
+      "myProfile": "Mi Perfil",
+      "signIn": "Iniciar Sesión",
+      "signOut": "Cerrar Sesión"
+    }
+  }
+}
+</i18n>