Merge branch 'dev' into feat/endpoints-in-backend-om-eigen-leerpaden-en-leerobjecten-toe-te-voegen-aan-de-databank-#248

frontend/src/components/MenuBar.vue

@@ -16,6 +16,7 @@
     const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
 
     const name: string = auth.authState.user!.profile.name!;
+    const username = auth.authState.user!.profile.preferred_username!;
     const email = auth.authState.user!.profile.email;
     const initials: string = name
         .split(" ")
@@ -183,10 +184,15 @@
             <v-card>
                 <v-card-text>
                     <div class="mx-auto text-center">
-                        <v-avatar color="#0e6942">
-                            <span class="text-h5">{{ initials }}</span>
+                        <v-avatar
+                            color="#0e6942"
+                            size="large"
+                            class="user-button mb-3"
+                        >
+                            <span>{{ initials }}</span>
                         </v-avatar>
                         <h3>{{ name }}</h3>
+                        <p class="text-caption mt-1">{{ username }}</p>
                         <p class="text-caption mt-1">{{ email }}</p>
                         <v-divider class="my-3"></v-divider>
                         <v-btn