From 655c02d6fc8bd0b2566eaef8079999258809385e Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 12:11:48 +0700
Subject: [PATCH] Replace mode toggle with TradeScanner/Search nav links in
 header

---
 app/components/navigation/MainNavigation.vue | 24 +++++++++-----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index c37c0ea..b8890cc 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -2,31 +2,29 @@
   <header class="h-20 bg-base-100/80 backdrop-blur-md shadow-md">
     <!-- Single row: Logo + Search + Icons -->
     <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
-      <!-- Left: Logo (top aligned) -->
-      <div class="flex items-start flex-shrink-0 pt-4">
+      <!-- Left: Logo + Nav links (top aligned) -->
+      <div class="flex items-start gap-6 flex-shrink-0 pt-4">
         <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
           <span class="font-bold text-xl">Optovia</span>
         </NuxtLink>
-      </div>
 
-      <!-- Mode toggle (between Logo and Search, top aligned) -->
-      <div v-if="showModeToggle" class="flex items-start flex-shrink-0 pt-3.5">
-        <div class="join">
+        <!-- Service nav links -->
+        <nav v-if="showModeToggle" class="flex items-center gap-1">
           <button
-            class="btn btn-sm join-item"
-            :class="catalogMode === 'explore' ? 'btn-primary' : 'btn-ghost'"
+            class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
+            :class="catalogMode === 'explore' ? 'bg-primary/10 text-primary' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
             @click="$emit('set-catalog-mode', 'explore')"
           >
-            {{ $t('catalog.modes.explore') }}
+            TradeScanner
           </button>
           <button
-            class="btn btn-sm join-item"
-            :class="catalogMode === 'quote' ? 'btn-primary' : 'btn-ghost'"
+            class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
+            :class="catalogMode === 'quote' ? 'bg-primary/10 text-primary' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
             @click="$emit('set-catalog-mode', 'quote')"
           >
-            {{ $t('catalog.modes.quote') }}
+            Search
           </button>
-        </div>
+        </nav>
       </div>
 
       <!-- Center: Search input (vertically centered) -->