Add mode toggle [Explore|Quote] left of search form in header

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()

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,