From e55c7613cd0d6ab8aae033d53f89647cb2d5a243 Mon Sep 17 00:00:00 2001 From: Bastian Masanek Date: Sun, 2 Nov 2025 09:24:36 +0100 Subject: [PATCH] Add Role Switcher component to styleguide with detailed usage instructions - Introduced RoleSwitcher component to the styleguide, allowing users to switch between different roles (individual, educator, company). - Enhanced the styleguide with a live example, design features, and component usage instructions for better clarity and usability. - Updated layout to include a new section for the Role Switcher, improving overall navigation and user experience. --- app/pages/internal/styleguide.vue | 73 ++++++++++++++++++++++++++++++- 1 file changed, 72 insertions(+), 1 deletion(-) diff --git a/app/pages/internal/styleguide.vue b/app/pages/internal/styleguide.vue index 1cfd700..c8d7c39 100644 --- a/app/pages/internal/styleguide.vue +++ b/app/pages/internal/styleguide.vue @@ -6,6 +6,7 @@ */ import { AlertCircle, CheckCircle } from 'lucide-vue-next' +import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue' definePageMeta({ layout: 'styleguide', @@ -727,7 +728,7 @@ const copyCode = async (code: string) => { -
+

Product Detail Page

Vollständige Produktdetailseite für Jahreskarten mit Hero-Image, Preis- und Verfügbarkeitsanzeige, @@ -739,6 +740,76 @@ const copyCode = async (code: string) => {

+ + +
+

Role Switcher Dropdown

+

+ Rollen-Auswahl-Dropdown für Benutzer. Ermöglicht das Wechseln zwischen verschiedenen Benutzerrollen + (Privatperson, Pädagoge, Firma). Der Button zeigt die aktuelle Rolle und öffnet ein Dropdown-Menü mit allen verfügbaren Optionen. +

+ + +
+

Live-Beispiel (interaktiv):

+
+ +
+
+ + +
+

Design Features

+
    +
  • + ✓ + Button-Style: Transparenter Hintergrund mit weißem Border, Glassmorphism-Effekt +
    • +
  • + ✓ + Kontext-Label: "Du kaufst als:" (nur Desktop, versteckt auf Mobile) +
    • +
  • + ✓ + Rolle mit Icon: Zeigt aktuelle Rolle mit passendem Icon (User, GraduationCap, Building2) +
    • +
  • + ✓ + Dropdown-Breite: Fixe Breite von 312px für konsistentes Layout +
    • +
  • + ✓ + Menü-Items: Große, klickbare Items (py-3) mit Icon, Titel und Beschreibung +
    • +
  • + ✓ + Aktive Rolle: Markiert mit grünem Check-Icon und lila Hintergrund +
    • +
  • + ✓ + Deaktivierte Rollen: Opacity 60%, "Demnächst" Badge, cursor-not-allowed +
    • +
  • + ✓ + Footer-Hinweis: Informationstext mit Emoji am Ende des Dropdowns +
    • +
+
+ + +
+ Show Component Code + 
<!-- Import component -->
+<script setup>
+import RoleSwitcher from '@/components/navigation/RoleSwitcher.vue'
+</script>
+
+<!-- Use in template -->
+<template>
+  <RoleSwitcher />
+</template>
+
+