bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor RoleSwitcher component for improved clarity and consistency

Browse Source 
- Updated role descriptions for clarity by removing unnecessary phrases.
- Enhanced template structure for better readability and consistency in styling.
- Adjusted dropdown menu width for improved layout and user experience.
This commit is contained in:
Bastian Masanek
2025-11-01 20:18:20 +01:00
parent a826ea1344
commit 0c875af73c
1 changed files with 20 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/components/navigation/RoleSwitcher.vue
View File

@@ -28,7 +28,7 @@ const roles: RoleOption[] = [
{
value: 'individual',
label: 'Privatperson',
description: 'für mich',
description: 'Privatperson',
icon: User,
color: 'text-purple-600',
enabled: true,
@@ -36,7 +36,7 @@ const roles: RoleOption[] = [
{
value: 'educator',
label: 'Pädagoge',
description: 'für Schule/Kita',
description: 'Pädagoge',
icon: GraduationCap,
color: 'text-orange-500',
enabled: false,
@@ -45,7 +45,7 @@ const roles: RoleOption[] = [
{
value: 'company',
label: 'Firma',
description: 'für Unternehmen',
description: 'Firma',
icon: Building2,
color: 'text-blue-600',
enabled: false,
@@ -70,60 +70,41 @@ function switchRole(role: UserRole) {
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button
variant="outline"
<dropdownMenuTrigger as-child>
<Button variant="outline"
class="gap-2 border-2 border-white/30 bg-white/5 text-white hover:bg-white/10 hover:border-white/50 transition-all duration-200 group"
title="Rolle wechseln"
>
title="Rolle wechseln">
<!-- Context label + role -->
<span class="text-xs text-white/70 font-normal hidden md:inline">Du kaufst als:</span>
<component :is="currentRoleData.icon" class="h-4 w-4 text-white" />
<span class="font-medium text-white">{{ currentRoleData.label }}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ml-1 opacity-70 text-white group-hover:opacity-100 transition-opacity"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="ml-1 opacity-70 text-white group-hover:opacity-100 transition-opacity">
<polyline points="6 9 12 15 18 9" />
</svg>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" class="w-64">
</dropdownMenuTrigger>
<DropdownMenuContent align="start" class="w-[312px]">
<DropdownMenuLabel class="text-sm font-normal text-muted-foreground py-3">
Für wen kaufst du?
Ich kaufe als...
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem
v-for="role in roles"
:key="role.value"
:disabled="!role.enabled"
:class="[
<DropdownMenuItem v-for="role in roles" :key="role.value" :disabled="!role.enabled" :class="[
'gap-3 py-3 cursor-pointer group',
!role.enabled && 'opacity-60 cursor-not-allowed',
currentRole === role.value && 'bg-purple-50 dark:bg-purple-950',
]"
@click="switchRole(role.value)"
>
]" @click="switchRole(role.value)">
<component :is="role.icon" :class="['h-5 w-5', role.color]" />
<div class="flex-1 flex flex-col gap-1">
<span class="text-sm font-semibold">{{ role.label }}</span>
<span class="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors">{{ role.description }}</span>
<span class="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors">{{
role.description }}</span>
</div>
<Check
v-if="currentRole === role.value"
class="h-5 w-5 text-green-600 flex-shrink-0"
/>
<Check v-if="currentRole === role.value" class="h-5 w-5 text-green-600 flex-shrink-0" />
<Badge v-if="role.badge" variant="secondary" class="text-xs px-2 py-0.5 flex-shrink-0">
{{ role.badge }}