Refactor role switcher: single item with arrows on right
All checks were successful
Build Docker Image / build (push) Successful in 4m44s
All checks were successful
Build Docker Image / build (push) Successful in 4m44s
- Remove separate "Кабинет" link and two role buttons - Add single role switcher: "Я клиент <>" format - Arrows <> shown only when user has both roles - Click text → navigate to cabinet, click arrows → switch role
This commit is contained in:
@@ -32,39 +32,35 @@
|
|||||||
>
|
>
|
||||||
{{ $t('catalog.modes.quote') }}
|
{{ $t('catalog.modes.quote') }}
|
||||||
</button>
|
</button>
|
||||||
<NuxtLink
|
<!-- Role switcher: Я клиент <> -->
|
||||||
v-if="loggedIn"
|
<div v-if="loggedIn" class="flex items-center">
|
||||||
:to="localePath('/clientarea/orders')"
|
<NuxtLink
|
||||||
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
|
:to="localePath(currentRole === 'SELLER' ? '/clientarea/offers' : '/clientarea/orders')"
|
||||||
:class="isClientArea
|
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
|
||||||
? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
|
:class="isClientArea
|
||||||
: (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
|
? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
|
||||||
>
|
: (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
|
||||||
{{ $t('cabinetNav.cabinet') }}
|
>
|
||||||
</NuxtLink>
|
{{ currentRole === 'SELLER' ? $t('cabinetNav.roles.seller') : $t('cabinetNav.roles.client') }}
|
||||||
|
</NuxtLink>
|
||||||
|
|
||||||
<!-- Role switcher -->
|
<!-- Стрелки <> справа (если есть обе роли) -->
|
||||||
<div v-if="loggedIn && (hasBuyerTeam || hasSellerTeam)" class="flex items-center gap-1 ml-2 pl-2 border-l border-white/20">
|
<div v-if="hasMultipleRoles" class="flex items-center ml-1">
|
||||||
<button
|
<button
|
||||||
v-if="currentRole === 'BUYER' || hasBuyerTeam"
|
class="p-0.5 transition-colors"
|
||||||
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
|
:class="useWhiteText ? 'text-white/50 hover:text-white' : 'text-base-content/50 hover:text-base-content'"
|
||||||
:class="currentRole === 'BUYER'
|
@click="$emit('switch-role', currentRole === 'BUYER' ? 'SELLER' : 'BUYER')"
|
||||||
? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
|
>
|
||||||
: (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
|
<Icon name="lucide:chevron-left" size="14" />
|
||||||
@click="$emit('switch-role', 'BUYER')"
|
</button>
|
||||||
>
|
<button
|
||||||
{{ $t('cabinetNav.roles.client') }}
|
class="p-0.5 transition-colors"
|
||||||
</button>
|
:class="useWhiteText ? 'text-white/50 hover:text-white' : 'text-base-content/50 hover:text-base-content'"
|
||||||
<button
|
@click="$emit('switch-role', currentRole === 'BUYER' ? 'SELLER' : 'BUYER')"
|
||||||
v-if="currentRole === 'SELLER' || hasSellerTeam"
|
>
|
||||||
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
|
<Icon name="lucide:chevron-right" size="14" />
|
||||||
:class="currentRole === 'SELLER'
|
</button>
|
||||||
? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
|
</div>
|
||||||
: (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
|
|
||||||
@click="$emit('switch-role', 'SELLER')"
|
|
||||||
>
|
|
||||||
{{ $t('cabinetNav.roles.seller') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
@@ -361,8 +357,7 @@ const props = withDefaults(defineProps<{
|
|||||||
} | null
|
} | null
|
||||||
isSeller?: boolean
|
isSeller?: boolean
|
||||||
// Role switching props
|
// Role switching props
|
||||||
hasBuyerTeam?: boolean
|
hasMultipleRoles?: boolean
|
||||||
hasSellerTeam?: boolean
|
|
||||||
currentRole?: string
|
currentRole?: string
|
||||||
// Search props
|
// Search props
|
||||||
activeTokens?: Array<{ type: string; id: string; label: string; icon: string }>
|
activeTokens?: Array<{ type: string; id: string; label: string; icon: string }>
|
||||||
|
|||||||
@@ -17,8 +17,7 @@
|
|||||||
:theme="theme"
|
:theme="theme"
|
||||||
:user-data="userData"
|
:user-data="userData"
|
||||||
:is-seller="isSeller"
|
:is-seller="isSeller"
|
||||||
:has-buyer-team="hasBuyerTeam"
|
:has-multiple-roles="hasMultipleRoles"
|
||||||
:has-seller-team="hasSellerTeam"
|
|
||||||
:current-role="currentRole"
|
:current-role="currentRole"
|
||||||
:active-tokens="activeTokens"
|
:active-tokens="activeTokens"
|
||||||
:available-chips="availableChips"
|
:available-chips="availableChips"
|
||||||
@@ -153,6 +152,7 @@ const sellerTeam = computed(() =>
|
|||||||
)
|
)
|
||||||
const hasBuyerTeam = computed(() => !!buyerTeam.value)
|
const hasBuyerTeam = computed(() => !!buyerTeam.value)
|
||||||
const hasSellerTeam = computed(() => !!sellerTeam.value)
|
const hasSellerTeam = computed(() => !!sellerTeam.value)
|
||||||
|
const hasMultipleRoles = computed(() => hasBuyerTeam.value && hasSellerTeam.value)
|
||||||
const currentRole = computed(() =>
|
const currentRole = computed(() =>
|
||||||
userData.value?.activeTeam?.teamType || 'BUYER'
|
userData.value?.activeTeam?.teamType || 'BUYER'
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user