Change creat btn position to side menu

src/views/contents/PublishContentButton.vue

@@ -71,9 +71,9 @@ const closeDialog = () => {
 
 <template>
   <button
-      class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
+      class=" items-center transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
       @click="isDialogActive = true">
-    <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
+    <v-icon style="font-size: 25px; height: 25px; width: 55px;">mdi-text-box-plus-outline</v-icon>
   </button>
 
   <v-dialog v-model="isDialogActive" max-width="500">

src/views/creators/CreatorContent.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="w-full h-full">   
-    <div v-if="creatorIsCurrentUser" class="flex space-x-4">
-      <publish-content-button></publish-content-button>
-      <v-btn icon @click="createHtmlContent">
-        <v-icon>mdi-pencil</v-icon>
-      </v-btn>
-    </div>
     <div v-if="brandingStore.value.loading">
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
@@ -20,15 +14,9 @@
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import ContentList from "@/views/contents/ContentList.vue";
 import {useRouter} from "vue-router";
-import PublishContentButton from "@/views/contents/PublishContentButton.vue";
-import {computed} from "vue";
-import {useAuthStore} from "@/stores/authStore.js";
 const brandingStore = useBrandingStore()
-const authStore = useAuthStore();
 const router = useRouter();
 
-const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === brandingStore.value.id);
-
 const createHtmlContent = () => {
   router.push('/content/editor');
 }

src/views/main/SideBar.vue

@@ -2,17 +2,28 @@
 import SubscriptionList from "@/views/creators/SubscriptionList.vue";
 import {useAuthStore} from "@/stores/authStore.js";
 import {useRouter} from 'vue-router';
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import {useI18n} from 'vue-i18n';
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import PublishContentButton from "@/views/contents/PublishContentButton.vue";
 
 const {locale} = useI18n();
 const router = useRouter();
 const selectedLanguage = ref(locale.value);
 
-const userProfileStore = useUserProfileStore()
+const userProfileStore = useUserProfileStore();
-const creatorProfileStore = useCreatorProfileStore()
+const creatorProfileStore = useCreatorProfileStore();
+const brandingStore = useBrandingStore();
+const authStore = useAuthStore();
+
+// Définir creatorIsCurrentUser avec la logique provenant du premier script
+const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === brandingStore.value.id);
+
+const createHtmlContent = () => {
+  router.push('/content/editor');
+};
 
 function initializeLocale() {
   const preferredLocale = localStorage.getItem('preferredLocale');
@@ -27,11 +38,10 @@ function toggleLanguage() {
   localStorage.setItem('preferredLocale', lang);
 }
 
-const authStore = useAuthStore();
-
 initializeLocale();
 </script>
 
+
 <template>
   <nav class="flex flex-col h-full bg-white">
 
@@ -48,6 +58,13 @@ initializeLocale();
       </router-link>
     </div>
 
+    <div v-if="creatorIsCurrentUser" class="justify-center text-center">
+    <publish-content-button></publish-content-button>
+    <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">