Bourse alignement, Paiement complété Recu modifié et le wallet est modifié

src/layouts/DefaultLayout.vue

@@ -71,8 +71,8 @@
                         </v-row>
                       </v-card-text>
 
-                      <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
+                      <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions"
-                        item-value="name">
+                        height="250" item-value="name">
                       </v-data-table-virtual>
 
                       <v-card-actions class="justify-center">
@@ -92,7 +92,7 @@
     </v-card>
 
     <!-- Mobile version -->
-    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
+    <v-card style="z-index: 2000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
       <v-app-bar app>
         <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
         <v-row>
@@ -107,7 +107,7 @@
       <!-- Left-side Menu -->
       <v-navigation-drawer v-model="drawer" temporary>
         <v-list>
-          <v-list-item subtitle="email" title="ANONYME">
+          <v-list-item :title="currentUserName">
             <template v-slot:prepend>
               <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
                 class="mobile-profile-picture mini-profile-picture " alt="Avatar">
@@ -125,10 +125,57 @@
           <RouterLink :to="{ name: 'userbrowser' }">
             <v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
           </RouterLink>
+
           <!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
-          <!-- <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>-->
+          <v-list-item v-if="currentUser">
-          <!-- <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
+            <v-dialog>
-            value="logout"></v-list-item>-->
+
+              <template v-slot:activator="{ props: activatorProps }">
+                <v-btn v-bind="activatorProps" class="d-flex justify-start align-center full-width-btn"
+                  outlined="false">
+                  <v-icon left class="mr-4">mdi-wallet</v-icon>
+                  <p class="my-0">Bourse</p>
+                </v-btn>
+              </template>
+              <!-- Wallet Modale -->
+              <template v-slot:default="{ isActive }">
+                <v-card style="border-radius: 30px;">
+                  <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
+                    <v-icon left size="48">mdi-wallet</v-icon>
+                    <v-toolbar title="Portefeuille"
+                      style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
+                  </div>
+                  <v-card-text class="text-h1 pa-12">
+                    <v-row>
+                      <v-col>
+                        <v-row>
+                          <v-col cols="7">
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
+                          </v-col>
+                          <v-col>
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
+                          </v-col>
+                        </v-row>
+                      </v-col>
+                      <v-col>
+
+                      </v-col>
+                    </v-row>
+                  </v-card-text>
+
+                  <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions"
+                    height="250" item-value="name">
+                  </v-data-table-virtual>
+
+                  <v-card-actions class="justify-center">
+                    <v-btn @click="isActive.value = false" text="Fermer"></v-btn>
+                  </v-card-actions>
+                </v-card>
+              </template>
+            </v-dialog>
+          </v-list-item>
+          <v-list-item v-if="currentUser" @click="logout()" style="margin-top: 110%;" prepend-icon="mdi-logout"
+            title="Déconnecter" value="logout"></v-list-item>
         </v-list>
       </v-navigation-drawer>
     </v-card>
@@ -142,6 +189,8 @@ import { onBeforeMount, ref } from 'vue';
 const client = useClient();
 
 const drawer = ref(false);
+
+
 const currentUserName = ref("INVITÉ");
 let currentUser = null;
 
@@ -167,6 +216,11 @@ function logout() {
   window.location.reload();
 }
 
+function openWalletModal() {
+
+}
+
+
 </script>