From 3140226bc38821e86ea7d4214d3657ea94845f26 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 24 Jan 2026 09:22:25 +0700
Subject: [PATCH] Navbar glass style only on catalog/map pages

- Add glassStyle prop to MainNavigation component
- When glassStyle=true: dark transparent bg with white text
- When glassStyle=false: solid bg-base-100 with normal text
- Pass isCatalogSection from layout to toggle glass effect
---
 app/components/navigation/MainNavigation.vue | 51 ++++++++++++++++----
 app/layouts/topnav.vue                       |  1 +
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 9f29bd1..aa28360 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,25 +1,32 @@
 <template>
-  <header class="h-[100px] bg-black/30 backdrop-blur-md shadow-lg border-b border-white/10">
+  <header
+    class="h-[100px] shadow-lg"
+    :class="glassStyle ? 'bg-black/30 backdrop-blur-md border-b border-white/10' : 'bg-base-100 border-b border-base-300'"
+  >
     <!-- Single row: Logo + Search + Icons -->
     <div class="flex items-stretch h-full px-4 lg:px-6 gap-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 text-white">Optovia</span>
+          <span class="font-bold text-xl" :class="glassStyle ? 'text-white' : 'text-base-content'">Optovia</span>
         </NuxtLink>
 
         <!-- Service nav links -->
         <nav v-if="showModeToggle" class="flex items-center gap-1">
           <button
             class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
-            :class="catalogMode === 'explore' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
+            :class="catalogMode === 'explore'
+              ? (glassStyle ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
+              : (glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
             @click="$emit('set-catalog-mode', 'explore')"
           >
             TradeScanner
           </button>
           <button
             class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
-            :class="catalogMode === 'quote' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
+            :class="catalogMode === 'quote'
+              ? (glassStyle ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
+              : (glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
             @click="$emit('set-catalog-mode', 'quote')"
           >
             Search
@@ -139,13 +146,21 @@
       <!-- Right: AI + Globe + Team + User (top aligned) -->
       <div class="flex items-start gap-1 flex-shrink-0 pt-3">
         <!-- AI Assistant button -->
-        <NuxtLink :to="localePath('/clientarea/ai')" class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
+        <NuxtLink
+          :to="localePath('/clientarea/ai')"
+          class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
+          :class="glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+        >
           <Icon name="lucide:bot" size="18" />
         </NuxtLink>
 
         <!-- Globe (language/currency) dropdown -->
         <div class="dropdown dropdown-end">
-          <button tabindex="0" class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
+          <button
+            tabindex="0"
+            class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
+            :class="glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+          >
             <Icon name="lucide:globe" size="18" />
           </button>
           <div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
@@ -175,7 +190,11 @@
         <!-- Team dropdown -->
         <template v-if="loggedIn && userData?.teams?.length">
           <div class="dropdown dropdown-end">
-            <button tabindex="0" class="flex items-center gap-1 px-2 py-1 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
+            <button
+              tabindex="0"
+              class="flex items-center gap-1 px-2 py-1 rounded-lg transition-colors"
+              :class="glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+            >
               <Icon name="lucide:building-2" size="16" />
               <span class="hidden lg:inline max-w-24 truncate text-xs">
                 {{ userData?.activeTeam?.name || $t('common.selectTeam') }}
@@ -207,11 +226,17 @@
         <template v-if="sessionChecked">
           <template v-if="loggedIn">
             <div class="dropdown dropdown-end">
-              <div tabindex="0" role="button" class="w-8 h-8 rounded-full overflow-hidden ring-2 ring-white/20 hover:ring-white/40 transition-all cursor-pointer">
+              <div
+                tabindex="0"
+                role="button"
+                class="w-8 h-8 rounded-full overflow-hidden ring-2 transition-all cursor-pointer"
+                :class="glassStyle ? 'ring-white/20 hover:ring-white/40' : 'ring-base-300 hover:ring-primary'"
+              >
                 <div v-if="userAvatarSvg" v-html="userAvatarSvg" class="w-full h-full" />
                 <div
                   v-else
-                  class="w-full h-full bg-white/20 flex items-center justify-center text-white font-bold text-xs"
+                  class="w-full h-full flex items-center justify-center font-bold text-xs"
+                  :class="glassStyle ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content'"
                 >
                   {{ userInitials }}
                 </div>
@@ -240,7 +265,11 @@
             </div>
           </template>
           <template v-else>
-            <button @click="$emit('sign-in')" class="px-4 py-1.5 rounded-full bg-white/20 text-white text-sm font-medium hover:bg-white/30 transition-colors">
+            <button
+              @click="$emit('sign-in')"
+              class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors"
+              :class="glassStyle ? 'bg-white/20 text-white hover:bg-white/30' : 'bg-primary text-primary-content hover:bg-primary-focus'"
+            >
               {{ $t('auth.login') }}
             </button>
           </template>
@@ -284,6 +313,8 @@ const props = defineProps<{
   quantity?: string
   canSearch?: boolean
   showModeToggle?: boolean
+  // Glass style (transparent) for map pages
+  glassStyle?: boolean
 }>()
 
 defineEmits([
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index a2be33b..160958b 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -22,6 +22,7 @@
         :quantity="quantity"
         :can-search="canSearch"
         :show-mode-toggle="true"
+        :glass-style="isCatalogSection"
         @toggle-theme="toggleTheme"
         @set-catalog-mode="setCatalogMode"
         @sign-out="onClickSignOut"