From ae9985023ce12f4cfac92cdecf1b2d391b398073 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 20:57:37 +0700
Subject: [PATCH] Add mode toggle [Explore|Quote] left of search form in header

---
 app/components/navigation/MainNavigation.vue | 24 +++++++++++++++++++-
 app/layouts/topnav.vue                       |  3 +++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 82201a1..e118640 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -9,6 +9,26 @@
         </NuxtLink>
       </div>
 
+      <!-- Mode toggle (between Logo and Search) -->
+      <div v-if="showModeToggle" class="flex items-center flex-shrink-0 py-2.5">
+        <div class="join">
+          <button
+            class="btn btn-sm join-item"
+            :class="catalogMode === 'explore' ? 'btn-primary' : 'btn-ghost'"
+            @click="$emit('set-catalog-mode', 'explore')"
+          >
+            {{ $t('catalog.modes.explore') }}
+          </button>
+          <button
+            class="btn btn-sm join-item"
+            :class="catalogMode === 'quote' ? 'btn-primary' : 'btn-ghost'"
+            @click="$emit('set-catalog-mode', 'quote')"
+          >
+            {{ $t('catalog.modes.quote') }}
+          </button>
+        </div>
+      </div>
+
       <!-- Center: Search input (transforms based on mode) -->
       <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
         <!-- Quote mode: Segmented input like Airbnb -->
@@ -259,6 +279,7 @@ const props = defineProps<{
   hubLabel?: string
   quantity?: string
   canSearch?: boolean
+  showModeToggle?: boolean
 }>()
 
 defineEmits([
@@ -273,7 +294,8 @@ defineEmits([
   'remove-token',
   'update:search-query',
   // Quote mode
-  'search'
+  'search',
+  'set-catalog-mode'
 ])
 
 const localePath = useLocalePath()
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 7682eee..c614587 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -21,7 +21,9 @@
         :hub-label="hubLabel"
         :quantity="quantity"
         :can-search="canSearch"
+        :show-mode-toggle="isCatalogSection"
         @toggle-theme="toggleTheme"
+        @set-catalog-mode="setCatalogMode"
         @sign-out="onClickSignOut"
         @sign-in="signIn()"
         @switch-team="switchToTeam"
@@ -64,6 +66,7 @@ const {
   removeFilter,
   editFilter,
   catalogMode,
+  setCatalogMode,
   productLabel,
   hubLabel,
   quantity,