Clean up sidebar.

frontend/src/views/main/SideBar.vue

@@ -1,91 +1,62 @@
 <script setup>
-import SubscriptionList from "@/views/creators/SubscriptionList.vue";
-import { useAuthStore } from "@/stores/authStore.js";
-import { useRouter } from 'vue-router';
-import { computed, ref } from "vue";
-import { useI18n } from 'vue-i18n';
-import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
+import {computed} from "vue";
+import {useI18n} from "vue-i18n";
+import {useAuthStore} from "@/stores/authStore.js";
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
-import {useSideBarStore} from "@/stores/sideBarStore.js"; 
 
 const {locale} = useI18n();
-const router = useRouter();
-const selectedLanguage = ref(locale.value);
+const translations = {
+  en: {
+    myPage: "my page",
+    myProfile: "my profile",
+    reduce: "collapse",
+    signIn: "login",
+    signOut: "sign out"
+  },
+  fr: {
+    myPage: "ma page",
+    myProfile: "mon profil",
+    reduce: "réduire",
+    signIn: "connexion",
+    signOut: "se déconnecter"
+  }
+};
+const t = computed(() => translations[locale.value] || translations["en"]);
 
 const userProfileStore = useUserProfileStore();
 const creatorProfileStore = useCreatorProfileStore();
 const authStore = useAuthStore();
-const sideBarStore = useSideBarStore(); 
-
-const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId);
-
-const createHtmlContent = () => {
-  router.push('/content/editor');
-};
-
-function initializeLocale() {
-  const preferredLocale = localStorage.getItem('preferredLocale');
-  selectedLanguage.value = preferredLocale === null ? locale.value : preferredLocale;
-  locale.value = selectedLanguage.value;
-}
 
 function toggleLanguage() {
-  const lang = selectedLanguage.value === 'fr' ? 'en' : 'fr';
-  locale.value = lang;
-  selectedLanguage.value = lang;
-  localStorage.setItem('preferredLocale', lang);
+  locale.value = locale.value === 'fr' ? 'en' : 'fr';
 }
 
-function toggleMenu() {
-  sideBarStore.toggle(); 
-}
-
-initializeLocale();
 </script>
 
 <template>
-  <nav :class="['fixed flex flex-col h-full bg-white border-r border-gray-300', sideBarStore.isOpen ? 'max-w-64 px-4' : 'max-w-[82px] px-2']">
+  <nav class="fixed flex flex-col h-full bg-white border-r border-gray-300 max-w-64 px-4">
+
     <!-- LOGO HUTOPY -->
-    <div class="mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
+    <div class="mt-4 px-4">
       <router-link to="/@hutopy">
-        <img v-if="sideBarStore.isOpen"
-             src="/images/hutopymedia/banners/hutopy.png"
-             alt="hutopy"
-             width="300px"
-             height="64px">
-        <img v-else
-             src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
-             alt="hutopy"
-             width="42px"
-             height="42px">
+        <img src="/medias/hutopy.png"
+             alt="hutopy logo"
+             width="300"
+             height="64">
       </router-link>
     </div>
 
-    
-<!--    <div class="flex-grow mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">-->
-<!--      <template v-if="authStore.isAuthenticated">  -->
-<!--        <div class="font-bold" :class="{ 'text-center': !sideBarStore.isOpen }">-->
-<!--          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.subscriptionTitle') }}</span>-->
-<!--          <span v-else>A</span>-->
-<!--        </div>-->
-<!--        <div-->
-<!--            class="border-b border-gray-300 my-4 mx-auto"-->
-<!--            :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"-->
-<!--        ></div>-->
-<!--        <subscription-list v-if="sideBarStore.isOpen"></subscription-list>-->
-<!--      </template>-->
-<!--    </div>-->
-
     <div
-        class="border-b border-gray-300 my-4 mx-auto"
-        :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
+        class="border-b border-gray-300 my-4 mx-auto w-48"
     ></div>
 
-<div class="flex-grow"></div>
+    <div class="flex-grow"></div>
 
     <!-- SECTION UTILISATEUR -->
-    <div :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
-      <div class="flex items-center justify-start p-2 mb-4" :class="!sideBarStore.isOpen ? 'my-2' : ''">       
+    <div class="px-4">
+
+      <div class="flex items-center justify-start p-2 mb-4">
         <img
             :src="userProfileStore.portraitUrl"
             alt="Profile Image"
@@ -94,63 +65,71 @@ initializeLocale();
             width="42"
             height="42"
             style="max-height: 42px;">
-        <span v-if="sideBarStore.isOpen" class="ml-2 text-sm font-sans capitalize">
+        <span class="ml-2 text-sm font-sans capitalize">
           {{ userProfileStore.alias }}
         </span>
       </div>
 
       <div class="flex flex-col gap-4 mb-4">
-<!--        <router-link v-if="creatorProfileStore.hasCreator" :to="`/content/editor`">-->
-<!--          <v-btn class="w-full justify-start" prepend-icon="mdi-pencil" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">-->
-<!--            <span v-if="sideBarStore.isOpen">Éditeur</span>-->
-<!--          </v-btn>-->
-<!--        </router-link>-->
-
-        <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
-          <v-btn class="w-full justify-start" prepend-icon="mdi-file-account-outline" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">{{ creatorProfileStore.creator.name }}</span>
-          </v-btn>
-        </router-link>
-
-        <v-btn v-else-if="authStore.isAuthenticated" to="/create-creator" variant="flat" class="w-full justify-start" prepend-icon="mdi-file-account-outline" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-          <span v-if="sideBarStore.isOpen">Ma page</span>
-        </v-btn>
 
         <div v-if="authStore.isAuthenticated">
-          <v-btn to="/profile" class="w-full justify-start" prepend-icon="mdi-account" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">{{ $t('header.myprofile') }}</span>
+
+          <v-btn v-if="creatorProfileStore.hasCreator"
+                 :to="`/@${creatorProfileStore.creator.name}`"
+                 class="w-full justify-start"
+                 prepend-icon="mdi-file-account-outline"
+                 variant="flat">
+            {{ t.myPage }}
+          </v-btn>
+
+          <v-btn v-else
+                 to="/create-creator"
+                 variant="flat"
+                 class="w-full justify-start"
+                 prepend-icon="mdi-file-account-outline">
+            {{ t.myPage }}
+          </v-btn>
+
+        </div>
+
+        <div v-if="authStore.isAuthenticated">
+          <v-btn to="/profile"
+                 class="w-full justify-start"
+                 prepend-icon="mdi-account"
+                 variant="flat">
+            {{ t.myProfile }}
           </v-btn>
         </div>
 
-        <v-btn variant="flat" class="w-full justify-start" prepend-icon="mdi-translate-variant" @click="toggleLanguage" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-          <span v-if="sideBarStore.isOpen">{{ $t('language.language') }}</span>
-        </v-btn>
-
-
-
-        <v-btn
-            @click="toggleMenu"
-            variant="flat"
-            class="w-full justify-start"
-            :prepend-icon="sideBarStore.isOpen ? 'mdi-arrow-collapse-left' : 'mdi-arrow-collapse-right'"
-            :class="!sideBarStore.isOpen ? 'my-2' : ''"
-        >
-          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.Reduce') }}</span>
+        <v-btn variant="flat"
+               class="w-full justify-start"
+               prepend-icon="mdi-translate-variant"
+               @click="toggleLanguage">
+          {{ locale }}
         </v-btn>
 
         <div v-if="!authStore.isAuthenticated">
-          <v-btn to="/login" variant="flat" class="justify-start" prepend-icon="mdi-login" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">{{ $t('sidebar.connection') }}</span>
+          <v-btn to="/login"
+                 variant="flat"
+                 class="justify-start"
+                 prepend-icon="mdi-login">
+            {{ t.signIn }}
           </v-btn>
         </div>
         <div v-else>
-          <v-btn @click="authStore.logout"  variant="flat" class="justify-start" prepend-icon="mdi-logout" :class="!sideBarStore.isOpen ? 'my-2' : ''">
-            <span v-if="sideBarStore.isOpen">{{ $t('header.Signout') }}</span>
+          <v-btn @click="authStore.logout"
+                 variant="flat"
+                 class="justify-start"
+                 prepend-icon="mdi-logout">
+            {{ t.signOut }}
           </v-btn>
         </div>
+
       </div>
     </div>
+
   </nav>
+
 </template>