From 72f2e1c39dc2436d3d83efce42462da5263c795c Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 15:44:52 +0700
Subject: [PATCH] Refactor role switcher: single item with arrows on right
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 app/components/navigation/MainNavigation.vue | 63 +++++++++-----------
 app/layouts/topnav.vue                       |  4 +-
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 78c8052..389f737 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -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 }>
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 45763d6..be697cc 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -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'
 )