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

@@ -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()