From 25da16f854c42eff3f2fa4899ec988d5e42822c5 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:06:30 +0700
Subject: [PATCH] Make search bar sticky third navigation bar

- Add sticky positioning with proper styling (bg, border-b)
- Use negative margins to span full width like nav bars
- Update map offset to account for 3 bars (11rem with search bar)
---
 app/components/page/CatalogPage.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index e2d6da6..49ed612 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -12,8 +12,8 @@
 
     <!-- Content -->
     <template v-else>
-      <!-- Search bar slot (full width, above split) -->
-      <div v-if="$slots.searchBar" class="py-3">
+      <!-- Search bar slot (sticky third bar - like navigation) -->
+      <div v-if="$slots.searchBar" class="sticky top-0 z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 py-2 bg-base-100 border-b border-base-300">
         <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
       </div>
 
@@ -214,9 +214,11 @@ const props = withDefaults(defineProps<{
 })
 
 // Map positioning - dynamic based on search bar presence
+// Without searchBar: MainNav (4rem) + SubNav (3rem) + padding (1rem) = 8rem
+// With searchBar: 8rem + SearchBar (3rem) = 11rem
 const slots = useSlots()
 const hasSearchBar = computed(() => !!slots.searchBar)
-const mapTopClass = computed(() => hasSearchBar.value ? 'top-44' : 'top-32')
+const mapTopClass = computed(() => hasSearchBar.value ? 'top-[11rem]' : 'top-32')
 const mapHeightClass = computed(() => hasSearchBar.value ? 'h-[calc(100vh-12rem)]' : 'h-[calc(100vh-9rem)]')
 
 const emit = defineEmits<{