fix(portal): match wizard sidebar exactly to Vuexy vertical wizard spec

- Remove "AANMELDEN" header text from sidebar
- Increase number squares to 50x50px with borderRadius 10px (not circles)
- Show subtitles on ALL steps (not just active), with dimmed color per state
- Active step: bold title, default color; completed: medium-weight, 0.5 opacity;
  future: medium-weight, 0.4 opacity
- Increase check icon to size 22, number font to 18px bold
- Update sidebar padding to pa-5 pt-8
- Add h-100 to right card, increase content padding to pa-8
- Guard goToStep click handler with index check

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-10 21:57:33 +02:00
parent 3e292567c3
commit 9e4e0c3d4b

View File

@@ -489,11 +489,7 @@ async function onSubmit() {
cols="12"
md="3"
>
<div class="pa-6">
<div class="text-overline text-medium-emphasis mb-6">
AANMELDEN
</div>
<div class="pa-5 pt-8">
<div
class="d-flex flex-column"
style="gap: 28px;"
@@ -503,14 +499,17 @@ async function onSubmit() {
:key="index"
class="d-flex align-center ga-4"
:class="{ 'cursor-pointer': index < currentStep }"
@click="goToStep(index)"
@click="index < currentStep && goToStep(index)"
>
<!-- Number square -->
<div
class="d-flex align-center justify-center rounded-lg flex-shrink-0"
class="d-flex align-center justify-center flex-shrink-0"
:style="{
width: '40px',
height: '40px',
width: '50px',
height: '50px',
borderRadius: '10px',
fontSize: '18px',
fontWeight: 700,
backgroundColor: index === currentStep
? 'rgb(var(--v-theme-primary))'
: index < currentStep
@@ -526,30 +525,36 @@ async function onSubmit() {
>
<VIcon
v-if="index < currentStep"
size="18"
size="22"
>
tabler-check
</VIcon>
<span
v-else
class="text-body-1 font-weight-bold"
>{{ index + 1 }}</span>
<span v-else>{{ index + 1 }}</span>
</div>
<!-- Step text -->
<div>
<div
class="text-body-1 font-weight-medium"
:class="{
'text-primary': index === currentStep,
'text-medium-emphasis': index !== currentStep,
'text-body-1 font-weight-bold': index === currentStep,
'text-body-1 font-weight-medium': index !== currentStep,
}"
:style="index > currentStep
? 'color: rgba(var(--v-theme-on-surface), 0.4)'
: index < currentStep
? 'color: rgba(var(--v-theme-on-surface), 0.5)'
: ''
"
>
{{ step.title }}
</div>
<div
v-if="index === currentStep"
class="text-caption text-medium-emphasis"
class="text-caption"
:style="{
color: index === currentStep
? 'rgba(var(--v-theme-on-surface), 0.5)'
: 'rgba(var(--v-theme-on-surface), 0.35)',
}"
>
{{ step.subtitle }}
</div>
@@ -598,8 +603,9 @@ async function onSubmit() {
<VCard
variant="flat"
rounded="lg"
class="h-100"
>
<VCardText class="pa-6">
<VCardText class="pa-8">
<!-- Step header -->
<div class="mb-6">
<h5 class="text-h5 mb-1">