From 6ee8c12e6fb7b8138efb356df270d874e709536c Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 16:07:41 +0700
Subject: [PATCH] Role switcher: dropdown menu with chevron icon

---
 app/components/navigation/MainNavigation.vue | 39 +++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index fc5afff..d84b7c2 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -32,7 +32,7 @@
           >
             {{ $t('catalog.modes.quote') }}
           </button>
-          <!-- Role switcher: Я клиент 🔄 -->
+          <!-- Role switcher: Я клиент + dropdown -->
           <div v-if="loggedIn" class="flex items-center">
             <NuxtLink
               :to="localePath(currentRole === 'SELLER' ? '/clientarea/offers' : '/clientarea/orders')"
@@ -44,15 +44,34 @@
               {{ currentRole === 'SELLER' ? $t('cabinetNav.roles.seller') : $t('cabinetNav.roles.client') }}
             </NuxtLink>
 
-            <!-- Иконка swap (если есть обе роли) -->
-            <button
-              v-if="hasMultipleRoles"
-              class="p-1 ml-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:arrow-left-right" size="14" />
-            </button>
+            <!-- Dropdown для переключения роли (если есть обе роли) -->
+            <div v-if="hasMultipleRoles" class="dropdown dropdown-end">
+              <button
+                tabindex="0"
+                class="p-1 ml-0.5 transition-colors"
+                :class="useWhiteText ? 'text-white/50 hover:text-white' : 'text-base-content/50 hover:text-base-content'"
+              >
+                <Icon name="lucide:chevron-down" size="14" />
+              </button>
+              <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-48 p-2 shadow-lg border border-base-300">
+                <li>
+                  <a
+                    :class="{ active: currentRole === 'BUYER' }"
+                    @click="$emit('switch-role', 'BUYER')"
+                  >
+                    {{ $t('cabinetNav.roles.client') }}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    :class="{ active: currentRole === 'SELLER' }"
+                    @click="$emit('switch-role', 'SELLER')"
+                  >
+                    {{ $t('cabinetNav.roles.seller') }}
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
         </nav>
       </div>