Role switcher: dropdown menu with chevron icon

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 (если есть обе роли) -->
+            <!-- Dropdown для переключения роли (если есть обе роли) -->
+            <div v-if="hasMultipleRoles" class="dropdown dropdown-end">
               <button
-              v-if="hasMultipleRoles"
+                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'"
-              @click="$emit('switch-role', currentRole === 'BUYER' ? 'SELLER' : 'BUYER')"
               >
-              <Icon name="lucide:arrow-left-right" size="14" />
+                <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>