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:
2026-04-13 12:44:21 +02:00
parent 59ad09fad2
commit 2d7464e05b
10 changed files with 628 additions and 464 deletions

View File

@@ -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"
>

View 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>