Ajout du content browser et lien dans le header

src/views/contents/ContentCard.vue

@@ -77,6 +77,9 @@
             @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>
 
       <div :class="{'hidden': !commentsVisible}">
@@ -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
@@ -109,13 +124,11 @@
         </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 { useSideBarStore } from '@/stores/sideBarStore.js';
 import { useUserStore } from "@/stores/userStore.js";
@@ -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>