Change header.vue btn

src/views/main/Header.vue

@@ -64,40 +64,36 @@
             <div v-if="!currentUser">
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <router-link to="/login">
+                  <v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
-                    Connexion
-                  </router-link>
                 </v-list-item-title>
               </v-list-item>
             </div>
 
             <div v-if="currentUser">
               <v-list-item class="nav-button">
-                <v-list-item-title>
+                <router-link :to="`/${currentUserName}`">
-                  <router-link :to="`/${currentUserName}`">
+                  <v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn>
-                    {{ currentUserName }}
+                </router-link>
-                  </router-link>
+              </v-list-item>
+              <v-list-item class="nav-button">
+                <v-list-item-title >
+                  <v-btn to="/profile" class="w-100 " variant="plain">Mon profil</v-btn>
                 </v-list-item-title>
               </v-list-item>
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <router-link to="/profile">
+                  <v-btn to="/wallet" class="w-100 " variant="plain"> Mon wallet</v-btn>
-                    Mon profil
-                  </router-link>
                 </v-list-item-title>
               </v-list-item>
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <router-link to="/wallet">
+                  <v-btn to="/wallet" class="w-100 " variant="plain"> Mon wallet</v-btn>
-                    Mon wallet
-                  </router-link>
                 </v-list-item-title>
               </v-list-item>
-              <v-list-item class="nav-button" @click="navigateToMessages">
+              <v-list-item class="nav-button">
-                <v-list-item-title>Messages</v-list-item-title>
+                <v-list-item-title>
-              </v-list-item>
+                  <v-btn @click="logout" to="/wallet" class="w-100 " variant="plain"> Déconnexion</v-btn>
-              <v-list-item class="nav-button" @click="logout">
+                </v-list-item-title>
-                <v-list-item-title>Déconnexion</v-list-item-title>
               </v-list-item>
             </div>
           </v-list>
@@ -109,7 +105,7 @@
   </header>
 </template>
 
- <script setup>
+<script setup>
 import MyUserModel from "@/models/myUserModel.js";
 import {useClient} from "@/plugins/api.js";
 import {ref, onMounted, onBeforeUnmount} from "vue";
@@ -182,6 +178,7 @@ onBeforeUnmount(() => {
 .search-container {
   position: relative;
 }
+
 .nav-button:hover {
   @apply bg-[#903175] text-gray-200;
 }

src/views/main/Wallet.vue

@@ -1,10 +1,50 @@
 <template>
-  <div class="mt-28"> test
+  <v-container class="mt-28 bg-gray-100 p-6 rounded-lg shadow-lg">
-    
+    <v-data-table
-  </div>
+        :headers="headers"
-
+        :items="transactions"
+        class="elevation-1"
+        :items-per-page="5"
+    >
+      <template v-slot:[`item.amount`]="{ item }">
+        <span>{{ item.amount }} {{ item.g }}</span>
+        
+      </template>
+    </v-data-table>
+  </v-container>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
+const headers = ref([
+  { text: 'Date', value: 'date' },
+  { text: 'Amount', value: 'amount' },
+  { text: 'Currency', value: 'currency' },
+  { text: 'Tip Message', value: 'tipMessage' },
+  { text: 'Paid', value: 'paid' },
+]);
+
+const transactions = ref([
+  {
+    date: '2024-06-01',
+    amount: '100',
+    currency: 'USD',
+    tipMessage: 'Thank you!',
+    paid: true,
+  },
+  {
+    date: '2024-06-15',
+    amount: '50',
+    currency: 'EUR',
+    tipMessage: 'Great service!',
+    paid: false,
+  },
+  // Ajoutez d'autres transactions ici
+]);
 
 </script>
+
+<style scoped>
+/* Ajoutez des styles personnalisés si nécessaire */
+</style>