optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make search bar sticky third navigation bar
All checks were successful
Build Docker Image / build (push) Successful in 5m17s
Details

Browse Source 
- 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)
This commit is contained in:
Ruslan Bakiev
2026-01-14 13:06:30 +07:00
parent 479412d901
commit 25da16f854
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/page/CatalogPage.vue
View File

@@ -12,8 +12,8 @@
<!-- Content --> <!-- Content -->
<template v-else> <template v-else>
<!-- Search bar slot (full width, above split) --> <!-- Search bar slot (sticky third bar - like navigation) -->
<div v-if="$slots.searchBar" class="py-3"> <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" /> <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
</div> </div>
@@ -214,9 +214,11 @@ const props = withDefaults(defineProps<{
}) })
// Map positioning - dynamic based on search bar presence // 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 slots = useSlots()
const hasSearchBar = computed(() => !!slots.searchBar) 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 mapHeightClass = computed(() => hasSearchBar.value ? 'h-[calc(100vh-12rem)]' : 'h-[calc(100vh-9rem)]')
const emit = defineEmits<{ const emit = defineEmits<{