9d0b1a6b15
All checks were successful
Build Docker Image / build (push) Successful in 4m24s
- 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
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
/**
|
|
* 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
|
|
}
|
|
}
|