From ca7c6fa8a507437fbcb843541507b3c85484bf65 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 6 Feb 2026 15:40:33 +0700
Subject: [PATCH] Refine top bar glass layout

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

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index d84b7c2..320ca79 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,13 +1,14 @@
 <template>
   <header
-    class="shadow-lg"
+    class="shadow-lg relative overflow-hidden"
     :class="headerClasses"
     :style="{ height: `${height}px` }"
   >
+    <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-white/35 via-white/15 to-transparent" />
     <!-- Single row: Logo + Search + Icons -->
-    <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
+    <div class="relative z-10 flex items-center 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">
+      <div class="flex items-center gap-6 flex-shrink-0 px-4 py-3 rounded-2xl border border-white/20 bg-white/15 backdrop-blur-md shadow-lg">
         <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
           <span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
         </NuxtLink>
@@ -83,7 +84,7 @@
 
         <!-- Client Area tabs -->
         <template v-if="isClientArea">
-          <div class="flex items-center gap-1 rounded-full border border-white/20 bg-white/80 backdrop-blur-md shadow-lg p-1">
+          <div class="flex items-center gap-1 rounded-full border border-white/35 bg-white/75 backdrop-blur-md shadow-lg p-1">
             <!-- BUYER tabs -->
             <template v-if="currentRole !== 'SELLER'">
               <NuxtLink
@@ -117,7 +118,7 @@
 
         <!-- Quote mode: Simple segmented input with search inside (white glass) -->
         <template v-else-if="catalogMode === 'quote'">
-          <div class="flex items-center w-full rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
+          <div class="flex items-center w-full rounded-full border border-white/50 bg-white/85 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
             <!-- Product segment -->
             <button
               class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@@ -166,7 +167,7 @@
         <template v-else>
           <!-- Big pill input -->
           <div
-            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/50 bg-white/85 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
             @click="focusInput"
           >
             <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
@@ -211,7 +212,7 @@
       </div>
 
       <!-- Right: AI + Globe + Team + User (top aligned like logo) -->
-      <div class="flex items-start gap-1 flex-shrink-0 pt-4">
+      <div class="flex items-center gap-1 flex-shrink-0 px-3 py-2 rounded-2xl border border-white/20 bg-white/15 backdrop-blur-md shadow-lg">
         <!-- AI Assistant button -->
         <NuxtLink
           :to="localePath('/clientarea/ai')"
@@ -480,19 +481,15 @@ const getTokenIcon = (type: string) => {
 
 // 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'
+    return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
   }
-  // White on other pages
-  return 'bg-base-100 border-b border-base-300'
+  if (props.isCollapsed) {
+    return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
+  }
+  return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
 })
 
 // Use white text on dark backgrounds (collapsed or home page with animation)
 const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
 </script>
-