From 9e4e0c3d4b7474a701119460951a81bf92483bfa Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Fri, 10 Apr 2026 21:57:33 +0200
Subject: [PATCH] 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>
---
 .../portal/src/pages/register/[eventSlug].vue | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/apps/portal/src/pages/register/[eventSlug].vue b/apps/portal/src/pages/register/[eventSlug].vue
index 1f3dd79b..e198e73e 100644
--- a/apps/portal/src/pages/register/[eventSlug].vue
+++ b/apps/portal/src/pages/register/[eventSlug].vue
@@ -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">