From 34fc1bfab6e6c155c1f187de0184bb18eb6ae153 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 7 Feb 2026 09:30:27 +0700
Subject: [PATCH] fix(home): keep nav static and shift hero input

---
 app/components/navigation/MainNavigation.vue | 50 +++++++++++++++++---
 app/layouts/topnav.vue                       |  1 +
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index c8c4d53..e581a26 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -4,9 +4,13 @@
     :class="headerClasses"
     :style="{ height: `${height}px` }"
   >
-    <div class="absolute inset-0 pointer-events-none glass-topfade" />
+    <div class="absolute top-0 left-0 right-0 pointer-events-none glass-topfade" :style="glassStyle" />
     <!-- Single row: Logo + Search + Icons -->
-    <div class="relative z-10 flex items-center h-full px-4 lg:px-6 gap-4">
+    <div
+      class="relative z-10 flex px-4 lg:px-6 gap-4"
+      :class="isHeroLayout ? 'items-start pt-4' : 'items-center'"
+      :style="rowStyle"
+    >
       <!-- Left: Logo + Nav links (top aligned) -->
       <div class="flex items-center flex-shrink-0 rounded-full glass-bright">
         <div class="flex items-center gap-2 px-4 py-2">
@@ -83,7 +87,11 @@
       </div>
 
       <!-- Center: Search input OR Client Area tabs (vertically centered) -->
-      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center">
+      <div
+        class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 transition-all"
+        :class="isHeroLayout ? 'justify-start' : 'justify-center'"
+        :style="centerStyle"
+      >
         <!-- Hero slot for home page title -->
         <slot name="hero" />
 
@@ -407,8 +415,11 @@ const props = withDefaults(defineProps<{
   isClientArea?: boolean
   // Dynamic height for hero effect
   height?: number
+  // Collapse progress for hero layout
+  collapseProgress?: number
 }>(), {
-  height: 100
+  height: 100,
+  collapseProgress: 1
 })
 
 defineEmits([
@@ -493,10 +504,37 @@ const getTokenIcon = (type: string) => {
   return icons[type] || 'lucide:tag'
 }
 
+const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
+const topRowHeight = 100
+
+const rowStyle = computed(() => {
+  if (isHeroLayout.value) {
+    return { height: `${topRowHeight}px` }
+  }
+  return { height: `${props.height}px` }
+})
+
+const glassStyle = computed(() => {
+  if (isHeroLayout.value) {
+    return { height: `${topRowHeight}px` }
+  }
+  return { height: '100%' }
+})
+
+const centerStyle = computed(() => {
+  if (!isHeroLayout.value) return {}
+  const heroHeight = props.height || topRowHeight
+  const minTop = 0
+  const maxTop = Math.max(120, Math.round(heroHeight * 0.42))
+  const progress = Math.min(1, Math.max(0, props.collapseProgress || 0))
+  const top = Math.round(maxTop - (maxTop - minTop) * progress)
+  return { marginTop: `${top}px` }
+})
+
 // Header background classes
 const headerClasses = computed(() => {
-  if (props.isHomePage) {
-    return 'bg-transparent backdrop-blur-xl'
+  if (props.isHomePage && !props.isCollapsed) {
+    return 'bg-transparent'
   }
   if (props.isCollapsed) {
     return 'bg-transparent backdrop-blur-xl'
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 910637d..d4ed51b 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -9,6 +9,7 @@
       <MainNavigation
         class="relative z-10"
         :height="isHomePage ? heroHeight : 100"
+        :collapse-progress="isHomePage ? collapseProgress : 1"
         :session-checked="sessionChecked"
         :logged-in="isLoggedIn"
         :user-avatar-svg="userAvatarSvg"