From 9d0b1a6b159fedd91496a4df9d7e201a6049ebbb Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Wed, 14 Jan 2026 21:34:06 +0700
Subject: [PATCH] feat: collapsible header on scroll for catalog pages

- Add useScrollCollapse composable to track scroll and collapse state
- Update topnav.vue to show collapsed bar with chevron when scrolled
- Add collapse button (chevron up) to SubNavigation
- Make SubNavigation sticky below MainNavigation
- Update CatalogPage map/searchbar positions based on header state
---
 app/components/navigation/SubNavigation.vue | 16 +++++-
 app/components/page/CatalogPage.vue         | 36 ++++++++++---
 app/composables/useScrollCollapse.ts        | 56 +++++++++++++++++++++
 app/layouts/topnav.vue                      | 36 ++++++++++++-
 4 files changed, 136 insertions(+), 8 deletions(-)
 create mode 100644 app/composables/useScrollCollapse.ts

diff --git a/app/components/navigation/SubNavigation.vue b/app/components/navigation/SubNavigation.vue
index 8a56b9d..bc6e9bc 100644
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -1,6 +1,15 @@
 <template>
-  <nav v-if="items.length > 0" class="bg-base-100 border-b border-base-300">
+  <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"
@@ -17,6 +26,11 @@
 <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 49ed612..ac4f6aa 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -13,7 +13,7 @@
     <!-- Content -->
     <template v-else>
       <!-- 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">
+      <div v-if="$slots.searchBar" class="sticky z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 py-2 bg-base-100 border-b border-base-300" :class="searchBarTopClass">
         <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
       </div>
 
@@ -213,13 +213,37 @@ const props = withDefaults(defineProps<{
   totalCount: 0
 })
 
-// Map positioning - dynamic based on search bar presence
-// Without searchBar: MainNav (4rem) + SubNav (3rem) + padding (1rem) = 8rem
-// With searchBar: 8rem + SearchBar (3rem) = 11rem
+// Inject header collapsed state from layout
+const headerCollapsed = inject<Ref<boolean>>('headerCollapsed', ref(false))
+
+// Map positioning - dynamic based on search bar presence and header collapsed state
+// Expanded: MainNav (4rem) + SubNav (3rem) = 7rem, with SearchBar = 10rem
+// Collapsed: CollapsedBar (2rem), with SearchBar = 5rem
 const slots = useSlots()
 const hasSearchBar = computed(() => !!slots.searchBar)
-const mapTopClass = computed(() => hasSearchBar.value ? 'top-[11rem]' : 'top-32')
-const mapHeightClass = computed(() => hasSearchBar.value ? 'h-[calc(100vh-12rem)]' : 'h-[calc(100vh-9rem)]')
+
+// SearchBar position: below header (sticky)
+const searchBarTopClass = computed(() => {
+  if (headerCollapsed.value) {
+    return 'top-8' // 2rem collapsed bar
+  }
+  return 'top-[7rem]' // 4rem MainNav + 3rem SubNav
+})
+
+// Map position: below header + searchbar (fixed)
+const mapTopClass = computed(() => {
+  if (headerCollapsed.value) {
+    return hasSearchBar.value ? 'top-[5rem]' : 'top-8' // collapsed bar + searchbar
+  }
+  return hasSearchBar.value ? 'top-[10rem]' : 'top-[7rem]' // full header + searchbar
+})
+
+const mapHeightClass = computed(() => {
+  if (headerCollapsed.value) {
+    return hasSearchBar.value ? 'h-[calc(100vh-6rem)]' : 'h-[calc(100vh-3rem)]'
+  }
+  return hasSearchBar.value ? 'h-[calc(100vh-11rem)]' : 'h-[calc(100vh-8rem)]'
+})
 
 const emit = defineEmits<{
   'select': [item: MapItem]
diff --git a/app/composables/useScrollCollapse.ts b/app/composables/useScrollCollapse.ts
new file mode 100644
index 0000000..1aa5064
--- /dev/null
+++ b/app/composables/useScrollCollapse.ts
@@ -0,0 +1,56 @@
+/**
+ * Composable for collapsing header on scroll
+ * Returns isCollapsed state that becomes true when scroll > threshold
+ * User can manually override the collapsed state
+ */
+export const useScrollCollapse = (threshold = 50) => {
+  const isCollapsed = ref(false)
+  const scrollY = ref(0)
+  const manualOverride = ref(false)
+
+  const onScroll = () => {
+    if (import.meta.server) return
+
+    scrollY.value = window.scrollY
+
+    // Only auto-collapse if user hasn't manually expanded
+    if (!manualOverride.value) {
+      isCollapsed.value = scrollY.value > threshold
+    }
+
+    // Reset manual override when scrolling back to top
+    if (scrollY.value <= threshold) {
+      manualOverride.value = false
+      isCollapsed.value = false
+    }
+  }
+
+  // Manual expand (user clicked chevron down)
+  const expand = () => {
+    isCollapsed.value = false
+    manualOverride.value = true
+  }
+
+  // Manual collapse (user clicked chevron up)
+  const collapse = () => {
+    isCollapsed.value = true
+    manualOverride.value = false
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', onScroll, { passive: true })
+    // Initial check
+    onScroll()
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+
+  return {
+    isCollapsed: readonly(isCollapsed),
+    scrollY: readonly(scrollY),
+    expand,
+    collapse
+  }
+}
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 5732c74..dd59ea6 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -1,7 +1,21 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-200">
+    <!-- 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"
       :session-checked="sessionChecked"
       :logged-in="isLoggedIn"
       :user-avatar-svg="userAvatarSvg"
@@ -20,7 +34,13 @@
     <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" />
+    <SubNavigation
+      v-if="!isHomePage"
+      v-show="!isHeaderCollapsed"
+      :section="currentSection"
+      :show-collapse-button="canCollapse"
+      @collapse="collapseHeader"
+    />
 
     <!-- Page content -->
     <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6 py-4">
@@ -35,6 +55,9 @@ const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
 const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
 const route = useRoute()
 
+// Collapsible header for catalog pages
+const { isCollapsed, expand, collapse } = useScrollCollapse(50)
+
 // Theme state
 const theme = useState<'default' | 'night'>('theme', () => 'default')
 
@@ -88,6 +111,17 @@ const isHomePage = computed(() => {
 // Show search bar only on main page
 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)
+
 // Avatar generation
 const generateUserAvatar = async (seed: string) => {
   if (!seed) return