Add role switcher (Client/Seller) in navigation menu

- Add role switcher buttons after Explore/Quote/Кабинет with separator
- Dynamic center tabs based on role: BUYER shows orders/addresses, SELLER shows offers
- Redirect to appropriate page when switching role in client area
- Add localization for roles.client and roles.seller

app/components/navigation/MainNavigation.vue

@@ -42,6 +42,30 @@
           >
             {{ $t('cabinetNav.cabinet') }}
           </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>
         </nav>
       </div>
 
@@ -53,28 +77,34 @@
         <!-- Client Area tabs -->
         <template v-if="isClientArea">
           <div class="flex items-center gap-1 rounded-full border border-white/20 bg-white/80 backdrop-blur-md shadow-lg p-1">
-            <NuxtLink
+            <!-- BUYER tabs -->
-              :to="localePath('/clientarea/orders')"
+            <template v-if="currentRole !== 'SELLER'">
-              class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
+              <NuxtLink
-              :class="isClientAreaTabActive('/clientarea/orders') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
+                :to="localePath('/clientarea/orders')"
-            >
+                class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
-              {{ $t('cabinetNav.orders') }}
+                :class="isClientAreaTabActive('/clientarea/orders') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
-            </NuxtLink>
+              >
-            <NuxtLink
+                {{ $t('cabinetNav.orders') }}
-              v-if="isSeller"
+              </NuxtLink>
-              :to="localePath('/clientarea/offers')"
+              <NuxtLink
-              class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
+                :to="localePath('/clientarea/addresses')"
-              :class="isClientAreaTabActive('/clientarea/offers') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
+                class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
-            >
+                :class="isClientAreaTabActive('/clientarea/addresses') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
-              {{ $t('cabinetNav.myOffers') }}
+              >
-            </NuxtLink>
+                {{ $t('cabinetNav.addresses') }}
-            <NuxtLink
+              </NuxtLink>
-              :to="localePath('/clientarea/addresses')"
+            </template>
-              class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
+
-              :class="isClientAreaTabActive('/clientarea/addresses') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
+            <!-- SELLER tabs -->
-            >
+            <template v-else>
-              {{ $t('cabinetNav.addresses') }}
+              <NuxtLink
-            </NuxtLink>
+                :to="localePath('/clientarea/offers')"
+                class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
+                :class="isClientAreaTabActive('/clientarea/offers') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
+              >
+                {{ $t('cabinetNav.myOffers') }}
+              </NuxtLink>
+            </template>
           </div>
         </template>
 
@@ -330,6 +360,10 @@ const props = withDefaults(defineProps<{
     teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
   } | null
   isSeller?: boolean
+  // Role switching props
+  hasBuyerTeam?: boolean
+  hasSellerTeam?: boolean
+  currentRole?: string
   // Search props
   activeTokens?: Array<{ type: string; id: string; label: string; icon: string }>
   availableChips?: Array<{ type: string; label: string }>
@@ -361,6 +395,7 @@ defineEmits([
   'sign-out',
   'sign-in',
   'switch-team',
+  'switch-role',
   // Search events
   'start-select',
   'cancel-select',

app/layouts/topnav.vue

@@ -17,6 +17,9 @@
         :theme="theme"
         :user-data="userData"
         :is-seller="isSeller"
+        :has-buyer-team="hasBuyerTeam"
+        :has-seller-team="hasSellerTeam"
+        :current-role="currentRole"
         :active-tokens="activeTokens"
         :available-chips="availableChips"
         :select-mode="selectMode"
@@ -36,6 +39,7 @@
         @sign-out="onClickSignOut"
         @sign-in="signIn()"
         @switch-team="switchToTeam"
+        @switch-role="switchToRole"
         @start-select="startSelect"
         @cancel-select="cancelSelect"
         @edit-token="editFilter"
@@ -129,7 +133,7 @@ const userData = useState<{
   avatarId?: string
   activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: SelectedLocation | null }
   activeTeamId?: string
-  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
+  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string; teamType?: string }>
 } | null>('me', () => null)
 
 const sessionChecked = ref(false)
@@ -140,6 +144,19 @@ const isSeller = computed(() => {
   return userData.value?.activeTeam?.teamType === 'SELLER'
 })
 
+// Role switching support
+const buyerTeam = computed(() =>
+  userData.value?.teams?.find(t => t?.teamType === 'BUYER')
+)
+const sellerTeam = computed(() =>
+  userData.value?.teams?.find(t => t?.teamType === 'SELLER')
+)
+const hasBuyerTeam = computed(() => !!buyerTeam.value)
+const hasSellerTeam = computed(() => !!sellerTeam.value)
+const currentRole = computed(() =>
+  userData.value?.activeTeam?.teamType || 'BUYER'
+)
+
 const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)
 
 const userName = computed(() => {
@@ -252,7 +269,7 @@ watch(userData, () => {
 await fetchSession().catch(() => {})
 sessionChecked.value = true
 
-const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string }) => {
+const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string; teamType?: string }) => {
   if (!team?.id) return
 
   try {
@@ -271,6 +288,20 @@ const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: str
   }
 }
 
+const switchToRole = async (role: 'BUYER' | 'SELLER') => {
+  const targetTeam = role === 'SELLER' ? sellerTeam.value : buyerTeam.value
+  if (targetTeam?.id) {
+    await switchToTeam(targetTeam)
+    // Redirect to appropriate page when in client area
+    if (isClientArea.value) {
+      const targetPath = role === 'SELLER'
+        ? '/clientarea/offers'
+        : '/clientarea/orders'
+      await navigateTo(localePath(targetPath))
+    }
+  }
+}
+
 const onClickSignOut = () => {
   signOut(siteUrl)
 }

i18n/locales/en/cabinetNav.json

@@ -14,6 +14,10 @@
     "seller": "Seller",
     "suppliers": "Suppliers",
     "hubs": "Hubs",
-    "ai": "AI assistant"
+    "ai": "AI assistant",
+    "roles": {
+      "client": "I'm a client",
+      "seller": "I'm a seller"
+    }
   }
 }

i18n/locales/ru/cabinetNav.json

@@ -14,6 +14,10 @@
     "seller": "Продавец",
     "suppliers": "Поставщики",
     "hubs": "Хабы",
-    "ai": "AI ассистент"
+    "ai": "AI ассистент",
+    "roles": {
+      "client": "Я клиент",
+      "seller": "Я продавец"
+    }
   }
 }