feat(portal): horizontal navbar layout with avatar menu and profile restructuring
Replace the simple inline header with a proper Vuexy-style horizontal navbar featuring left (logo + event switcher), center (conditional menu items based on approval status), and right (avatar dropdown with profile link and logout) sections. Move profile page from /profile to /profiel as a platform-level page with "Mijn evenementen" section, removing the event-scoped status card and remarks field. Registration and success pages now use the portal layout with hideEventMenu meta so they get the navbar when logged in but no event menu items. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -147,7 +147,7 @@ const registeredLabel = computed(() => {
|
||||
sm="4"
|
||||
>
|
||||
<VCard
|
||||
:to="{ name: 'portal-profile' }"
|
||||
:to="{ name: 'portal-profiel' }"
|
||||
class="h-100 text-decoration-none portal-action-card"
|
||||
elevation="1"
|
||||
>
|
||||
|
||||
75
apps/portal/src/components/portal/UserAvatarMenu.vue
Normal file
75
apps/portal/src/components/portal/UserAvatarMenu.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const userInitials = computed(() => {
|
||||
const user = authStore.user
|
||||
if (!user) return '?'
|
||||
const first = user.first_name?.charAt(0) ?? ''
|
||||
const last = user.last_name?.charAt(0) ?? ''
|
||||
|
||||
return (first + last).toUpperCase() || '?'
|
||||
})
|
||||
|
||||
const userFullName = computed(() => authStore.user?.full_name ?? '')
|
||||
const userEmail = computed(() => authStore.user?.email ?? '')
|
||||
|
||||
async function logout() {
|
||||
await authStore.logout()
|
||||
await router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
location="bottom end"
|
||||
:close-on-content-click="false"
|
||||
min-width="220"
|
||||
>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<VAvatar
|
||||
v-bind="menuProps"
|
||||
size="36"
|
||||
color="primary"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<span class="text-body-2 font-weight-medium text-white">
|
||||
{{ userInitials }}
|
||||
</span>
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VList density="compact">
|
||||
<!-- User info -->
|
||||
<VListItem class="pb-0">
|
||||
<VListItemTitle class="font-weight-bold text-body-1">
|
||||
{{ userFullName }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-caption text-medium-emphasis">
|
||||
{{ userEmail }}
|
||||
</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- Profile link -->
|
||||
<VListItem
|
||||
to="/profiel"
|
||||
prepend-icon="tabler-user"
|
||||
title="Mijn Profiel"
|
||||
/>
|
||||
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- Logout -->
|
||||
<VListItem
|
||||
prepend-icon="tabler-logout"
|
||||
title="Uitloggen"
|
||||
class="text-error"
|
||||
@click="logout"
|
||||
/>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
Reference in New Issue
Block a user