From ab95a06daa58f6bee60417afa7de449f3eebfc4d Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Sun, 4 May 2025 08:42:01 +0200
Subject: [PATCH] feat: gebruiker kan klikken op avatar en naam en email zien

---
 frontend/src/components/MenuBar.vue | 44 +++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 87224dcb..a58be2f8 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -14,6 +14,7 @@
     const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
 
     const name: string = auth.authState.user!.profile.name!;
+    const email = auth.authState.user!.profile.email;
     const initials: string = name
         .split(" ")
         .map((n) => n[0])
@@ -161,12 +162,43 @@
                 </v-card>
             </template>
         </v-dialog>
-        <v-avatar
-            size="large"
-            color="#0e6942"
-            class="user-button"
-            >{{ initials }}</v-avatar
-        >
+        <v-menu min-width="200px">
+            <template v-slot:activator="{ props }">
+                <v-btn
+                    icon
+                    v-bind="props"
+                >
+                    <v-avatar
+                        color="#0e6942"
+                        size="large"
+                        class="user-button"
+                    >
+                        <span>{{ initials }}</span>
+                    </v-avatar>
+                </v-btn>
+            </template>
+            <v-card>
+                <v-card-text>
+                    <div class="mx-auto text-center">
+                        <v-avatar color="#0e6942">
+                            <span class="text-h5">{{ initials }}</span>
+                        </v-avatar>
+                        <h3>{{ name }}</h3>
+                        <p class="text-caption mt-1">{{ email }}</p>
+                        <v-divider class="my-3"></v-divider>
+                        <v-btn
+                            variant="text"
+                            rounded
+                            append-icon="mdi-logout"
+                            @click="performLogout"
+                            to="/login"
+                            >{{ t("logout") }}</v-btn
+                        >
+                        <v-divider class="my-3"></v-divider>
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-menu>
     </v-app-bar>
     <v-navigation-drawer
         v-model="drawer"