Ajout du content browser et lien dans le header

src/views/contents/ContentCard.vue

@@ -76,6 +76,9 @@
             icon
             @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
+        </v-btn>      
+        <v-btn variant="plain" icon @click="donate">
+          <v-icon>mdi-gift-outline</v-icon>
         </v-btn>
       </div>
 
@@ -130,6 +133,10 @@ function dislikeContent() {
   console.log('Content disliked');
 }
 
+function donate() {
+  console.log('Content disliked');
+}
+
 function getComponent(url) {
   if (url.includes('youtube.com') || url.includes('youtu.be')) {
     return YoutubePlayer;

src/views/main/Header.vue

@@ -6,7 +6,6 @@
     <div class="flex items-center">
       <v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
       </v-app-bar-nav-icon>
-
       <RouterLink to="/" class="hidden md:block">
         <v-img
             src="/medias/hutopy.png"
@@ -26,6 +25,22 @@
       </RouterLink>
     </div>
 
+    <!-- Spacer to push the Explorer button to the center -->
+    <div class="flex-grow"></div>
+
+    <!-- Explorer Button -->
+    <v-btn
+        variant="plain"
+        icon
+        class="flex flex-row justify-center"
+        @click="explorerHandler"
+    >
+      <v-icon>mdi-earth</v-icon>
+    </v-btn>
+
+    <!-- Spacer to keep the search bar to the right -->
+    <div class="flex-grow"></div>
+
     <div class="flex items-center ml-auto space-x-4 search-container">
       <template v-if="showSearch">
         <v-text-field
@@ -54,7 +69,7 @@
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
             <div v-bind="props" class="flex align-center font-sans py-1 px-4 rounded-lg hover:bg-gray-100">
-              <span class="max-w-xs  hidden md:block">
+              <span class="max-w-xs hidden md:block">
                 {{ userStore.alias }}
               </span>
               <img
@@ -66,12 +81,12 @@
             </div>
           </template>
 
-          <v-list min-width="200px" class=" align-center mt-3 left-3">
+          <v-list min-width="200px" class="align-center mt-3 left-3">
 
             <template v-if="!authStore.isAuthenticated">
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
+                  <v-btn to="/login" class="w-100" variant="plain">Connexion</v-btn>
                 </v-list-item-title>
               </v-list-item>
             </template>
@@ -79,13 +94,13 @@
             <template v-else>
               <v-list-item v-if="userStore.creator && Object.keys(userStore.creator).length > 0" class="nav-button">
                 <router-link :to="`/@${userStore.creator.name}`">
-                  <v-btn class="w-100 " variant="plain">@{{ userStore.creator.name }}</v-btn>
+                  <v-btn class="w-100" variant="plain">@{{ userStore.creator.name }}</v-btn>
                 </router-link>
               </v-list-item>
 
               <v-list-item v-if="userStore.creator && !Object.keys(userStore.creator).length > 0" class="nav-button">
                 <router-link :to="`/@${userStore.creator.name}`">
-                  <v-btn class="w-100 " variant="plain">Activer votre page </v-btn>
+                  <v-btn class="w-100" variant="plain">Activer votre page</v-btn>
                 </router-link>
               </v-list-item>
 
@@ -109,17 +124,15 @@
         </v-menu>
       </div>
     </div>
-
-
   </header>
 </template>
 
 <script setup>
-import {ref, onBeforeUnmount, onBeforeMount, watch} from "vue";
+import { ref, onBeforeUnmount, onBeforeMount } from "vue";
-import {useRouter} from 'vue-router';
+import { useRouter } from 'vue-router';
-import {useSideBarStore} from '@/stores/sideBarStore.js';
+import { useSideBarStore } from '@/stores/sideBarStore.js';
-import {useUserStore} from "@/stores/userStore.js";
+import { useUserStore } from "@/stores/userStore.js";
-import {useAuthStore} from "@/stores/authStore.js";
+import { useAuthStore } from "@/stores/authStore.js";
 
 const authStore = useAuthStore()
 const userStore = useUserStore()
@@ -147,6 +160,10 @@ const toggleSearch = () => {
   showSearch.value = !showSearch.value;
 };
 
+const explorerHandler = () => {
+  router.push('/explorer');
+};
+
 const handleClickOutside = (event) => {
   if (!event.target.closest('.search-container')) {
     showSearch.value = false;
@@ -163,7 +180,6 @@ onBeforeUnmount(() => {
 
 </script>
 
-
 <style scoped>
 .search-container {
   position: relative;
@@ -172,6 +188,4 @@ onBeforeUnmount(() => {
 .nav-button:hover {
   @apply bg-[#903175] text-gray-200;
 }
-
-
 </style>