optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor role switcher: single item with arrows on right
All checks were successful
Build Docker Image / build (push) Successful in 4m44s
Details

Browse Source 
- 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:
Ruslan Bakiev
2026-01-29 15:44:52 +07:00
parent 3d5215d967
commit 72f2e1c39d
2 changed files with 31 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/components/navigation/MainNavigation.vue
View File

@@ -32,39 +32,35 @@
>
{{ $t('catalog.modes.quote') }}
</button>
<NuxtLink
v-if="loggedIn"
:to="localePath('/clientarea/orders')"
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="isClientArea
? (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>
<!-- Role switcher: Я клиент <> -->
<div v-if="loggedIn" class="flex items-center">
<NuxtLink
:to="localePath(currentRole === 'SELLER' ? '/clientarea/offers' : '/clientarea/orders')"
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="isClientArea
? (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')"
>
{{ 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">
<button
v-if="currentRole === 'BUYER' || hasBuyerTeam"
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="currentRole === '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')"
@click="$emit('switch-role', 'BUYER')"
>
{{ $t('cabinetNav.roles.client') }}
</button>
<button
v-if="currentRole === 'SELLER' || hasSellerTeam"
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="currentRole === 'SELLER'
? (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')"
@click="$emit('switch-role', 'SELLER')"
>
{{ $t('cabinetNav.roles.seller') }}
</button>
<!-- Стрелки <> справа (если есть обе роли) -->
<div v-if="hasMultipleRoles" class="flex items-center ml-1">
<button
class="p-0.5 transition-colors"
:class="useWhiteText ? 'text-white/50 hover:text-white' : 'text-base-content/50 hover:text-base-content'"
@click="$emit('switch-role', currentRole === 'BUYER' ? 'SELLER' : 'BUYER')"
>
<Icon name="lucide:chevron-left" size="14" />
</button>
<button
class="p-0.5 transition-colors"
:class="useWhiteText ? 'text-white/50 hover:text-white' : 'text-base-content/50 hover:text-base-content'"
@click="$emit('switch-role', currentRole === 'BUYER' ? 'SELLER' : 'BUYER')"
>
<Icon name="lucide:chevron-right" size="14" />
</button>
</div>
</div>
</nav>
</div>
@@ -361,8 +357,7 @@ const props = withDefaults(defineProps<{
} | null
isSeller?: boolean
// Role switching props
hasBuyerTeam?: boolean
hasSellerTeam?: boolean
hasMultipleRoles?: boolean
currentRole?: string
// Search props
activeTokens?: Array<{ type: string; id: string; label: string; icon: string }>

4
app/layouts/topnav.vue
View File

@@ -17,8 +17,7 @@
:theme="theme"
:user-data="userData"
:is-seller="isSeller"
:has-buyer-team="hasBuyerTeam"
:has-seller-team="hasSellerTeam"
:has-multiple-roles="hasMultipleRoles"
:current-role="currentRole"
:active-tokens="activeTokens"
:available-chips="availableChips"
@@ -153,6 +152,7 @@ const sellerTeam = computed(() =>
)
const hasBuyerTeam = computed(() => !!buyerTeam.value)
const hasSellerTeam = computed(() => !!sellerTeam.value)
const hasMultipleRoles = computed(() => hasBuyerTeam.value && hasSellerTeam.value)
const currentRole = computed(() =>
userData.value?.activeTeam?.teamType || 'BUYER'
)