From 85adc049212ad40580254cbe79abfee5a5228034 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 3 Nov 2024 10:34:57 -0500
Subject: [PATCH] App: Added a sidebar store with BannerAction to adjust the
 z-depth. CreatorLayout: Resized the content with the sidebar and added the
 option for a closed or open menu. Also added a value in SidebarStore to track
 the menu state for correct positioning.

---
 src/App.vue                          |  20 ++--
 src/stores/sideBarStore.js           |  31 +++---
 src/views/creators/BannerActions.vue |   2 +-
 src/views/creators/CreatorLayout.vue |   2 +-
 src/views/main/SideBar.vue           | 149 +++++++++++++--------------
 5 files changed, 93 insertions(+), 111 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0218c91..16ed01d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,35 +1,33 @@
 <template>
   <v-app>
     <div class="flex flex-row">
-
-      <div class="fixed h-full w-60 border-r-2 z-30 ">
+      <div class="border-r-2 z-30">
         <side-bar></side-bar>
       </div>
-
-      <div class="pl-60 w-full">
-
+      
+      <div :class="['w-full', sideBarStore.sidebarWidth]">
         <div v-if="!brandingStore.loading"
              class="min-h-screen justify-center items-center py-10"
-             :style="{backgroundColor: brandingStore.colors.background}">
+             :style="{ backgroundColor: brandingStore.colors.background }">
           <router-view></router-view>
         </div>
-
       </div>
-
     </div>
   </v-app>
 
   <size-indicator></size-indicator>
-
 </template>
 
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { useSideBarStore } from "@/stores/sideBarStore.js";
 
-const brandingStore = useBrandingStore()
+const brandingStore = useBrandingStore();
+const sideBarStore = useSideBarStore(); 
 </script>
 
 <style scoped>
 </style>
+s
\ No newline at end of file
diff --git a/src/stores/sideBarStore.js b/src/stores/sideBarStore.js
index 02075ed..0e1b142 100644
--- a/src/stores/sideBarStore.js
+++ b/src/stores/sideBarStore.js
@@ -1,23 +1,16 @@
-import {computed, ref} from 'vue';
-import {defineStore} from "pinia";
+// src/stores/sideBarStore.js
+import { computed, ref } from 'vue';
+import { defineStore } from 'pinia';
 
-export const useSideBarStore = defineStore(
-    'sideBar',
-    () => {
-        const state = ref(false)
-        const visible = computed(() => state.value)
+export const useSideBarStore = defineStore('sideBar', () => {
+    const isOpen = ref(true); // par défaut, le menu est ouvert
 
-        function toggle() {
-            state.value = !state.value
-        }
+    const toggle = () => {
+        isOpen.value = !isOpen.value;
+    };
 
-        function show() {
-            state.value = true
-        }
+    // Classe de largeur dynamique pour le contenu principal
+    const sidebarWidth = computed(() => (isOpen.value ? 'ml-64' : 'ml-16'));
 
-        function hide() {
-            state.value = false
-        }
-
-        return {visible, toggle, show, hide}
-    })
\ No newline at end of file
+    return { isOpen, toggle, sidebarWidth };
+});
diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue
index fe32339..56447eb 100644
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -55,7 +55,7 @@
             </div>
           </div>
 
-          <div class="absolute bottom-6 right-8 z-30 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
+          <div class="absolute bottom-6 right-8 z-20 shadow-2xl rounded-md text-white w-64 h-28 flex justify-center align-center"
                :style="{ backgroundColor: brandingStore.colors.secondary}">
            
             <donation-button-banner               
diff --git a/src/views/creators/CreatorLayout.vue b/src/views/creators/CreatorLayout.vue
index 6bf747b..3e9162f 100644
--- a/src/views/creators/CreatorLayout.vue
+++ b/src/views/creators/CreatorLayout.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex flex-col min-h-screen max-w-[1200px] mx-auto">
+  <div class="flex flex-col min-h-screen max-w-[1100px] mx-auto">
     <div v-if="brandingStore.loading">
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
index fc3dfef..9ebed71 100644
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -1,11 +1,12 @@
 <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 { 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();
@@ -14,6 +15,7 @@ const selectedLanguage = ref(locale.value);
 const userProfileStore = useUserProfileStore();
 const creatorProfileStore = useCreatorProfileStore();
 const authStore = useAuthStore();
+const sideBarStore = useSideBarStore(); 
 
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId);
 
@@ -34,46 +36,56 @@ function toggleLanguage() {
   localStorage.setItem('preferredLocale', lang);
 }
 
+function toggleMenu() {
+  sideBarStore.toggle(); 
+}
+
 initializeLocale();
 </script>
 
-
 <template>
-  <nav class="flex flex-col h-full bg-white">
-
-    <!-- APP SECTION -->
-    <div class="px-4 mt-4">
-
-      <!-- LOGO HUTOPY -->
+  <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']">
+    <!-- LOGO HUTOPY -->
+    <div class="mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
       <router-link to="/">
-        <img src="/images/hutopymedia/banners/hutopy.png"
+        <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">
       </router-link>
     </div>
 
     
-    <div v-if="creatorIsCurrentUser" class="justify-center text-center"> 
-    <v-btn variant="flat" icon="" @click="createHtmlContent">
-      <v-icon>mdi-pencil</v-icon>
-    </v-btn>
-      
-    </div>
-    <!-- SUBSCRIPTION SECTION -->
-    <div class="flex-grow px-4 mt-4">
-      <template v-if="authStore.isAuthenticated">
-        <div class="font-bold"> {{ $t('sidebar.subscriptionTitle') }}</div>
-        <!-- SUBSCRIPTION LIST -->
-        <subscription-list>
-        </subscription-list>
+    <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>
 
-    <v-divider class="my-4" style="border-width: 1px; border-color: black;"></v-divider>
-    <!-- USER SECTION -->
-    <div class="px-4 mb-4">
-      <div class="flex items-center justify-start p-2 mb-4">
+    <div
+        class="border-b border-gray-300 my-4 mx-auto"
+        :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
+    ></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' : ''">       
         <img
             :src="userProfileStore.portraitUrl"
             alt="Profile Image"
@@ -81,73 +93,52 @@ initializeLocale();
             class="rounded-full"
             width="42"
             height="42"
-            style="max-height: 42px;"
-        >
-        <span class="ml-2  text-sm font-sans capitalize">
+            style="max-height: 42px;">
+        <span v-if="sideBarStore.isOpen" class="ml-2 text-sm font-sans capitalize">
           {{ userProfileStore.alias }}
         </span>
       </div>
 
-
-      <div class="flex flex-column gap-4">
-        <!-- YOUR PAGE -->
-        <router-link v-if="creatorProfileStore.hasCreator"
-                     :to="`/@${creatorProfileStore.creator.name}`">
-          <v-btn class="w-full justify-start"
-                 prepend-icon="mdi-home-account"
-                 variant="flat">
-            {{ creatorProfileStore.creator.name }}
+      <div class="flex flex-col gap-4 mb-4">
+        <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
+          <v-btn class="w-full justify-start" prepend-icon="mdi-home-account" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
+            <span v-if="sideBarStore.isOpen">{{ creatorProfileStore.creator.name }}</span>
           </v-btn>
         </router-link>
 
-        <router-link v-else-if="authStore.isAuthenticated"
-                     class="w-full justify-start"
+        <router-link v-else-if="authStore.isAuthenticated" class="w-full justify-start"
                      to="/profile?target=CreatorPage">
-          <v-btn class="w-100" variant="plain">Activer votre page</v-btn>
+          <v-btn class="w-full" variant="plain" :class="!sideBarStore.isOpen ? 'my-2' : ''"><span v-if="sideBarStore.isOpen">Activer votre page</span></v-btn>
         </router-link>
-        <!-- CREATE CONTENT -->
 
-        <!-- PROFILE -->
-        <template v-if="authStore.isAuthenticated">
-          <v-btn to="/profile"
-                 class="w-full justify-start"
-                 prepend-icon="mdi-account"
-                 variant="flat">
-            {{ $t('header.myprofile') }}
+        <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>
-        </template>
+        </div>
 
-        <!-- LANGUAGE -->
-        <v-btn
-            variant="flat"
-            class="w-full justify-start"
-            prepend-icon="mdi-translate-variant"
-            @click="toggleLanguage"
-        >
-          {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
+        <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">{{ selectedLanguage.value === 'fr' ? 'Fr' : 'En' }}</span>
         </v-btn>
 
-        <!-- LOGIN / LOGOUT -->
-        <template v-if="!authStore.isAuthenticated">
-          <v-btn to="/login"
-                 variant="flat"
-                 class="w-full justify-start"
-                 prepend-icon="mdi-login">
-            Connexion
+        <div>
+          <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">{{ sideBarStore.isOpen ? 'Réduire' : '' }}</span>
           </v-btn>
-        </template>
-        <template v-else>
-          <v-btn @click="authStore.logout"
-                 variant="flat"
-                 class="w-full justify-start"
-                 prepend-icon="mdi-logout">
-            {{ $t('header.Signout') }}
+        </div>
+
+        <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">Connexion</span>
           </v-btn>
-        </template>
+        </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>
+        </div>
       </div>
-
     </div>
-
   </nav>
 </template>