From 43158924abf1c3918292283d53459ff411e67a81 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 15 Jan 2026 12:51:00 +0700
Subject: [PATCH] Fix smooth scroll animation and map positioning

- Replace v-show with transform: translateY() for smooth header collapse animation
- Wrap MainNav + SubNav in fixed container with dynamic transform
- Remove sticky positioning from MainNavigation and SubNavigation
- Fix map to extend to screen edge (right-0, no rounded corners)
- Add dynamic padding-top to main for fixed header compensation
---
 app/components/navigation/MainNavigation.vue |  2 +-
 app/components/navigation/SubNavigation.vue  |  2 +-
 app/components/page/CatalogPage.vue          |  2 +-
 app/layouts/topnav.vue                       | 66 ++++++++++++--------
 4 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 779ed25..24991a8 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="sticky top-0 z-40 bg-base-100 border-b border-base-300">
+  <header class="bg-base-100 border-b border-base-300">
     <div class="relative flex items-center h-16 px-4 lg:px-6">
       <!-- Left: Logo -->
       <div class="flex items-center">
diff --git a/app/components/navigation/SubNavigation.vue b/app/components/navigation/SubNavigation.vue
index f1d80fc..8a56b9d 100644
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav v-if="items.length > 0" class="sticky top-16 z-30 bg-base-100 border-b border-base-300">
+  <nav v-if="items.length > 0" class="bg-base-100 border-b border-base-300">
     <div class="flex items-center gap-1 py-2 px-4 lg:px-6 overflow-x-auto">
       <NuxtLink
         v-for="item in items"
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 9e1c873..09612b4 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -65,7 +65,7 @@
 
           <!-- Right: Map (fixed position) -->
           <div class="w-3/5 relative">
-            <div class="fixed right-6 w-[calc(60%-3rem)] rounded-lg overflow-hidden" :style="mapStyle">
+            <div class="fixed right-0 w-3/5 overflow-hidden" :style="mapStyle">
               <!-- Search with map checkbox -->
               <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
                 <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 7f3c4bd..0455f4d 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -1,34 +1,35 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-300">
-    <!-- Main Navigation (Logo + Tabs + User) -->
-    <MainNavigation
-      v-show="!isHeaderCollapsed"
-      :session-checked="sessionChecked"
-      :logged-in="isLoggedIn"
-      :user-avatar-svg="userAvatarSvg"
-      :user-name="userName"
-      :user-initials="userInitials"
-      :theme="theme"
-      :user-data="userData"
-      :is-seller="isSeller"
-      @toggle-theme="toggleTheme"
-      @sign-out="onClickSignOut"
-      @sign-in="signIn()"
-      @switch-team="switchToTeam"
-    />
+    <!-- Fixed Header Container (MainNav + SubNav) - slides up on scroll -->
+    <div class="fixed top-0 left-0 right-0 z-40" :style="headerStyle">
+      <!-- Main Navigation (Logo + Tabs + User) -->
+      <MainNavigation
+        :session-checked="sessionChecked"
+        :logged-in="isLoggedIn"
+        :user-avatar-svg="userAvatarSvg"
+        :user-name="userName"
+        :user-initials="userInitials"
+        :theme="theme"
+        :user-data="userData"
+        :is-seller="isSeller"
+        @toggle-theme="toggleTheme"
+        @sign-out="onClickSignOut"
+        @sign-in="signIn()"
+        @switch-team="switchToTeam"
+      />
 
-    <!-- Global Search Bar -->
-    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />
+      <!-- Sub Navigation (section-specific tabs) - hidden on home page -->
+      <SubNavigation
+        v-if="!isHomePage"
+        :section="currentSection"
+      />
+    </div>
 
-    <!-- Sub Navigation (section-specific tabs) - hidden on home page -->
-    <SubNavigation
-      v-if="!isHomePage"
-      v-show="!isHeaderCollapsed"
-      :section="currentSection"
-    />
+    <!-- Global Search Bar - only on home page, in document flow -->
+    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300 mt-16" />
 
-    <!-- Page content -->
-    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6">
+    <!-- Page content - padding-top compensates for fixed header -->
+    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6" :style="mainStyle">
       <slot />
     </main>
   </div>
@@ -41,7 +42,7 @@ const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
 const route = useRoute()
 
 // Collapsible header for catalog pages
-const { isCollapsed } = useScrollCollapse(50)
+const { headerOffset, isCollapsed } = useScrollCollapse(118)
 
 // Theme state
 const theme = useState<'default' | 'night'>('theme', () => 'default')
@@ -100,6 +101,17 @@ const showSearch = computed(() => isHomePage.value)
 const canCollapse = computed(() => !isHomePage.value)
 const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)
 
+// Header style - transform for smooth slide animation (only on catalog pages)
+const headerStyle = computed(() => {
+  if (isHomePage.value) return {}
+  return { transform: `translateY(${headerOffset.value}px)` }
+})
+
+// Main content padding-top to compensate for fixed header
+const mainStyle = computed(() => ({
+  paddingTop: isHomePage.value ? '64px' : '118px'
+}))
+
 // Provide collapsed state to child components (CatalogPage needs it for map positioning)
 provide('headerCollapsed', isHeaderCollapsed)