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

@@ -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">

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"

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" />

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) -->
+    <!-- Fixed Header Container (MainNav + SubNav) - slides up on scroll -->
-    <MainNavigation
+    <div class="fixed top-0 left-0 right-0 z-40" :style="headerStyle">
-      v-show="!isHeaderCollapsed"
+      <!-- Main Navigation (Logo + Tabs + User) -->
-      :session-checked="sessionChecked"
+      <MainNavigation
-      :logged-in="isLoggedIn"
+        :session-checked="sessionChecked"
-      :user-avatar-svg="userAvatarSvg"
+        :logged-in="isLoggedIn"
-      :user-name="userName"
+        :user-avatar-svg="userAvatarSvg"
-      :user-initials="userInitials"
+        :user-name="userName"
-      :theme="theme"
+        :user-initials="userInitials"
-      :user-data="userData"
+        :theme="theme"
-      :is-seller="isSeller"
+        :user-data="userData"
-      @toggle-theme="toggleTheme"
+        :is-seller="isSeller"
-      @sign-out="onClickSignOut"
+        @toggle-theme="toggleTheme"
-      @sign-in="signIn()"
+        @sign-out="onClickSignOut"
-      @switch-team="switchToTeam"
+        @sign-in="signIn()"
-    />
+        @switch-team="switchToTeam"
+      />
 
-    <!-- Global Search Bar -->
+      <!-- Sub Navigation (section-specific tabs) - hidden on home page -->
-    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />
+      <SubNavigation
+        v-if="!isHomePage"
+        :section="currentSection"
+      />
+    </div>
 
-    <!-- Sub Navigation (section-specific tabs) - hidden on home page -->
+    <!-- Global Search Bar - only on home page, in document flow -->
-    <SubNavigation
+    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300 mt-16" />
-      v-if="!isHomePage"
-      v-show="!isHeaderCollapsed"
-      :section="currentSection"
-    />
 
-    <!-- Page content -->
+    <!-- Page content - padding-top compensates for fixed header -->
-    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6">
+    <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)