tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: gebruiker kan klikken op avatar en naam en email zien

Browse source
This commit is contained in:
laurejablonski 2025-05-04 08:42:01 +02:00
parent 8addea5454
commit ab95a06daa
1 changed files with 38 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/components/MenuBar.vue
View file

@ -14,6 +14,7 @@
const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
const name: string = auth.authState.user!.profile.name!; const name: string = auth.authState.user!.profile.name!;
const email = auth.authState.user!.profile.email;
const initials: string = name const initials: string = name
.split(" ") .split(" ")
.map((n) => n[0]) .map((n) => n[0])
@ -161,12 +162,43 @@
</v-card> </v-card>
</template> </template>
</v-dialog> </v-dialog>
<v-avatar <v-menu min-width="200px">
size="large" <template v-slot:activator="{ props }">
color="#0e6942" <v-btn
class="user-button" icon
>{{ initials }}</v-avatar 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-app-bar>
<v-navigation-drawer <v-navigation-drawer
v-model="drawer" v-model="drawer"