From ea7c0b460ab7a761d49d4f80a2f8f8641911b09d Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 15 Jan 2026 11:55:41 +0700
Subject: [PATCH] Move expand button from separate bar to SearchBar area

---
 app/components/navigation/SubNavigation.vue | 14 --------------
 app/components/page/CatalogPage.vue         | 17 +++++++++++++++--
 app/layouts/topnav.vue                      | 21 +--------------------
 3 files changed, 16 insertions(+), 36 deletions(-)

diff --git a/app/components/navigation/SubNavigation.vue b/app/components/navigation/SubNavigation.vue
index bc6e9bc..f1d80fc 100644
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -1,15 +1,6 @@
 <template>
   <nav v-if="items.length > 0" class="sticky top-16 z-30 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">
-      <!-- Collapse button (chevron up) -->
-      <button
-        v-if="showCollapseButton"
-        class="btn btn-ghost btn-xs btn-circle mr-1 flex-shrink-0"
-        @click="emit('collapse')"
-      >
-        <Icon name="lucide:chevron-up" size="16" />
-      </button>
-
       <NuxtLink
         v-for="item in items"
         :key="item.path"
@@ -26,11 +17,6 @@
 <script setup lang="ts">
 const props = defineProps<{
   section: 'catalog' | 'orders' | 'seller' | 'settings'
-  showCollapseButton?: boolean
-}>()
-
-const emit = defineEmits<{
-  collapse: []
 }>()
 
 const localePath = useLocalePath()
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 18e9d58..9e92b5a 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -14,7 +14,20 @@
     <template v-else>
       <!-- Search bar slot (sticky third bar - like navigation) -->
       <div v-if="$slots.searchBar" class="sticky z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 pt-4 pb-2 bg-base-100 border-b border-base-300" :style="searchBarStyle">
-        <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
+        <div class="flex items-center gap-2">
+          <!-- Expand button - appears when header collapsed -->
+          <button
+            v-if="isCollapsed"
+            class="btn btn-ghost btn-sm gap-1 flex-shrink-0"
+            @click="expand"
+          >
+            <span class="font-bold text-primary text-lg">O</span>
+            <Icon name="lucide:chevron-up" size="14" />
+          </button>
+          <div class="flex-1">
+            <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
+          </div>
+        </div>
       </div>
 
       <!-- With Map: Split Layout -->
@@ -215,7 +228,7 @@ const props = withDefaults(defineProps<{
 
 // Smooth scroll collapse - pixel values for smooth animation
 // MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 56px
-const { searchBarTop, mapTop } = useScrollCollapse(118, 56)
+const { searchBarTop, mapTop, isCollapsed, expand } = useScrollCollapse(118, 56)
 
 const slots = useSlots()
 const hasSearchBar = computed(() => !!slots.searchBar)
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 00ae7cb..0ec4ecf 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -1,18 +1,5 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-300">
-    <!-- Collapsed header bar (only on catalog pages when scrolled) -->
-    <div
-      v-if="showCollapsedBar"
-      class="sticky top-0 z-40 bg-base-100 border-b border-base-300 h-8 flex items-center px-4 lg:px-6"
-    >
-      <button
-        class="btn btn-ghost btn-xs btn-circle"
-        @click="expandHeader"
-      >
-        <Icon name="lucide:chevron-down" size="16" />
-      </button>
-    </div>
-
     <!-- Main Navigation (Logo + Tabs + User) -->
     <MainNavigation
       v-show="!isHeaderCollapsed"
@@ -38,8 +25,6 @@
       v-if="!isHomePage"
       v-show="!isHeaderCollapsed"
       :section="currentSection"
-      :show-collapse-button="canCollapse"
-      @collapse="collapseHeader"
     />
 
     <!-- Page content -->
@@ -56,7 +41,7 @@ const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
 const route = useRoute()
 
 // Collapsible header for catalog pages
-const { isCollapsed, expand, collapse } = useScrollCollapse(50)
+const { isCollapsed } = useScrollCollapse(50)
 
 // Theme state
 const theme = useState<'default' | 'night'>('theme', () => 'default')
@@ -114,10 +99,6 @@ const showSearch = computed(() => isHomePage.value)
 // Collapsible header logic - only for catalog pages (not home page)
 const canCollapse = computed(() => !isHomePage.value)
 const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)
-const showCollapsedBar = computed(() => isHeaderCollapsed.value)
-
-const expandHeader = () => expand()
-const collapseHeader = () => collapse()
 
 // Provide collapsed state to child components (CatalogPage needs it for map positioning)
 provide('headerCollapsed', isHeaderCollapsed)