Clean up sidebar.

frontend/src/App.vue

@@ -16,7 +16,7 @@
       </div>
 
       <!-- PC -->
-      <div v-if="!smAndDown" :class="['w-full', sideBarStore.sidebarWidth]">
+      <div v-if="!smAndDown" class="w-full ml-64">
         <div v-if="!brandingStore.loading"
              class="min-h-screen justify-center items-center"
              :style="{ backgroundColor: brandingStore.colors.background }">
@@ -24,18 +24,17 @@
         </div>
       </div>
     </div>
+
   </v-app>
 </template>
 
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
 import { useBrandingStore } from "@/stores/brandingStore.js";
-import { useSideBarStore } from "@/stores/sideBarStore.js";
 import { useDisplay } from "vuetify";
 
 const { smAndDown } = useDisplay();
 const brandingStore = useBrandingStore();
-const sideBarStore = useSideBarStore();
 </script>
 
 <style scoped>

frontend/src/locales/en.json

@@ -1,7 +1,4 @@
 {
-  "language": {
-    "language": "En"
-  },
   "general": {
     "yes": "yes",
     "no": "no"
@@ -19,11 +16,6 @@
     "about": "About",
     "pricing": "Pricing"
   },
-  "sidebar": {
-    "subscriptionTitle": "Subscription",
-    "connection": "connection",
-    "Reduce": "Reduce"
-  },
   "subscribebutton": {
     "subscribe": "Subscribe",
     "unsubscribe": "Unsubscribe"
@@ -34,9 +26,7 @@
     "user": "User"
   },
   "header": {
-    "myprofile": "My profile",
+    "wallet": "Wallet"
-    "wallet": "Wallet",
-    "Signout": "Sign out"
   },
   "message": {
     "edit": "Edit",

frontend/src/locales/fr.json

@@ -1,7 +1,4 @@
 {
-  "language": {
-    "language": "Fr"
-  },
   "general": {
     "yes": "oui",
     "no": "non"
@@ -19,11 +16,6 @@
     "about": "À propos",
     "pricing": "Frais"
   },
-  "sidebar": {
-    "subscriptionTitle": "Abonnements",
-    "connection": "connexion",
-    "Reduce": "réduire"
-  },
   "subscribebutton": {
     "subscribe": "S'abonner",
     "unsubscribe": "Se désabonner"
@@ -34,9 +26,7 @@
     "user": "utilisateur"
   },
   "header": {
-    "myprofile": "Mon profil",
+    "wallet": "PorteFeuille"
-    "wallet": "PorteFeuille",
-    "Signout": "se déconnecter"
   },
   "message": {
     "edit": "Modifier",

frontend/src/stores/sideBarStore.js

@@ -1,16 +0,0 @@
-// src/stores/sideBarStore.js
-import { computed, ref } from 'vue';
-import { defineStore } from 'pinia';
-
-export const useSideBarStore = defineStore('sideBar', () => {
-    const isOpen = ref(true); // par défaut, le menu est ouvert
-
-    const toggle = () => {
-        isOpen.value = !isOpen.value;
-    };
-
-    // Classe de largeur dynamique pour le contenu principal
-    const sidebarWidth = computed(() => (isOpen.value ? 'ml-64' : 'ml-16'));
-
-    return { isOpen, toggle, sidebarWidth };
-});

frontend/src/views/main/SideBar.vue

@@ -1,91 +1,62 @@
 <script setup>
-import SubscriptionList from "@/views/creators/SubscriptionList.vue";
+import {computed} from "vue";
+import {useI18n} from "vue-i18n";
 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 {useUserProfileStore} from "@/stores/userProfileStore.js";
-import {useSideBarStore} from "@/stores/sideBarStore.js"; 
 
 const {locale} = useI18n();
-const router = useRouter();
+const translations = {
-const selectedLanguage = ref(locale.value);
+  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 = locale.value === 'fr' ? 'en' : 'fr';
-  locale.value = lang;
-  selectedLanguage.value = lang;
-  localStorage.setItem('preferredLocale', lang);
 }
 
-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"
+        <img src="/medias/hutopy.png"
-             src="/images/hutopymedia/banners/hutopy.png"
+             alt="hutopy logo"
-             alt="hutopy"
+             width="300"
-             width="300px"
+             height="64">
-             height="64px">
-        <img v-else
-             src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
-             alt="hutopy"
-             width="42px"
-             height="42px">
       </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="border-b border-gray-300 my-4 mx-auto w-48"
-        :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
     ></div>
 
     <div class="flex-grow"></div>
 
     <!-- SECTION UTILISATEUR -->
-    <div :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
+    <div class="px-4">
-      <div class="flex items-center justify-start p-2 mb-4" :class="!sideBarStore.isOpen ? 'my-2' : ''">       
+
+      <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' : ''">
+        <v-btn variant="flat"
-          <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'"
+               prepend-icon="mdi-translate-variant"
-            :class="!sideBarStore.isOpen ? 'my-2' : ''"
+               @click="toggleLanguage">
-        >
+          {{ locale }}
-          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.Reduce') }}</span>
         </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' : ''">
+          <v-btn to="/login"
-            <span v-if="sideBarStore.isOpen">{{ $t('sidebar.connection') }}</span>
+                 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' : ''">
+          <v-btn @click="authStore.logout"
-            <span v-if="sideBarStore.isOpen">{{ $t('header.Signout') }}</span>
+                 variant="flat"
+                 class="justify-start"
+                 prepend-icon="mdi-logout">
+            {{ t.signOut }}
           </v-btn>
         </div>
+
       </div>
     </div>
+
   </nav>
+
 </template>