From 65250f1342c2df67008f0f0f89126c2ed3049da1 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 27 Jan 2026 10:19:00 +0700
Subject: [PATCH] Fix hero animation: transparent navbar on home page, glass on
 collapse

---
 app/components/navigation/MainNavigation.vue | 43 ++++++++++++++------
 app/layouts/topnav.vue                       |  3 +-
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index d9cd90e..6c5d834 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <header
     class="shadow-lg"
-    :class="isCollapsed ? 'bg-black/30 backdrop-blur-md border-b border-white/10' : 'bg-base-100 border-b border-base-300'"
+    :class="headerClasses"
     :style="{ height: `${height}px` }"
   >
     <!-- Single row: Logo + Search + Icons -->
@@ -9,7 +9,7 @@
       <!-- 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" :class="isCollapsed ? 'text-white' : 'text-base-content'">Optovia</span>
+          <span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
         </NuxtLink>
 
         <!-- Service nav links -->
@@ -17,8 +17,8 @@
           <button
             class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
             :class="showActiveMode && catalogMode === 'explore'
-              ? (isCollapsed ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
-              : (isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
+              ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
+              : (useWhiteText ? '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')"
           >
             {{ $t('catalog.modes.explore') }}
@@ -26,8 +26,8 @@
           <button
             class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
             :class="showActiveMode && catalogMode === 'quote'
-              ? (isCollapsed ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
-              : (isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
+              ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
+              : (useWhiteText ? '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')"
           >
             {{ $t('catalog.modes.quote') }}
@@ -141,7 +141,7 @@
         <NuxtLink
           :to="localePath('/clientarea/ai')"
           class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
-          :class="isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+          :class="useWhiteText ? '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>
@@ -151,7 +151,7 @@
           <button
             tabindex="0"
             class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
-            :class="isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+            :class="useWhiteText ? '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>
@@ -185,7 +185,7 @@
             <button
               tabindex="0"
               class="h-8 flex items-center gap-1 px-2 rounded-lg transition-colors"
-              :class="isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+              :class="useWhiteText ? '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">
@@ -222,13 +222,13 @@
                 tabindex="0"
                 role="button"
                 class="w-8 h-8 rounded-full overflow-hidden ring-2 transition-all cursor-pointer"
-                :class="isCollapsed ? 'ring-white/20 hover:ring-white/40' : 'ring-base-300 hover:ring-primary'"
+                :class="useWhiteText ? '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 flex items-center justify-center font-bold text-xs"
-                  :class="isCollapsed ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content'"
+                  :class="useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content'"
                 >
                   {{ userInitials }}
                 </div>
@@ -260,7 +260,7 @@
             <button
               @click="$emit('sign-in')"
               class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors"
-              :class="isCollapsed ? 'bg-white/20 text-white hover:bg-white/30' : 'bg-primary text-primary-content hover:bg-primary-focus'"
+              :class="useWhiteText ? 'bg-white/20 text-white hover:bg-white/30' : 'bg-primary text-primary-content hover:bg-primary-focus'"
             >
               {{ $t('auth.login') }}
             </button>
@@ -308,6 +308,8 @@ const props = withDefaults(defineProps<{
   showActiveMode?: boolean  // Whether to show active state on mode toggle
   // Glass style applied when header is collapsed
   isCollapsed?: boolean
+  // Home page flag for transparent background
+  isHomePage?: boolean
   // Dynamic height for hero effect
   height?: number
 }>(), {
@@ -386,5 +388,22 @@ const getTokenIcon = (type: string) => {
   }
   return icons[type] || 'lucide:tag'
 }
+
+// Header background classes
+const headerClasses = computed(() => {
+  if (props.isCollapsed) {
+    // Glass style when collapsed
+    return 'bg-black/30 backdrop-blur-md border-b border-white/10'
+  }
+  if (props.isHomePage) {
+    // Transparent on home page (animation visible behind)
+    return 'bg-transparent'
+  }
+  // White on other pages
+  return 'bg-base-100 border-b border-base-300'
+})
+
+// Use white text on dark backgrounds (collapsed or home page with animation)
+const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
 </script>
 
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index b916ec9..ddfd175 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -28,7 +28,8 @@
         :can-search="canSearch"
         :show-mode-toggle="true"
         :show-active-mode="isCatalogSection"
-        :is-collapsed="isHomePage || isCatalogSection"
+        :is-collapsed="isHomePage ? heroIsCollapsed : isCatalogSection"
+        :is-home-page="isHomePage"
         @toggle-theme="toggleTheme"
         @set-catalog-mode="setCatalogMode"
         @sign-out="onClickSignOut"