diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue index 48ecc5dee7..39bc1a5b78 100644 --- a/apps/frontend/src/components/ui/NavTabs.vue +++ b/apps/frontend/src/components/ui/NavTabs.vue @@ -191,12 +191,20 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } { } function getTabElement(index: number): HTMLElement | null { - if (!tabLinkElements.value?.[index]) return null + if (index === -1) return null - // In navigation mode, elements are NuxtLinks with $el property - // In local mode, elements are plain divs - const element = tabLinkElements.value[index] - return props.mode === 'navigation' ? (element as any).$el : element + const container = scrollContainer.value as HTMLElement | undefined + if (!container) return null + + const tabs = container.querySelectorAll('.button-animation') + const element = tabs[index] as HTMLElement | undefined + + if (!element) return null + + // In navigation mode, elements are NuxtLinks, but since we used querySelectorAll, + // we already have the raw HTMLElement ($el), so no further conversion is needed. + // In local mode, elements are already plain divs. + return element } function positionSlider() { @@ -253,7 +261,8 @@ function animateSliderTo(newPosition: { sliderBottom.value = newPosition.bottom } -function updateActiveTab() { +async function updateActiveTab() { + await nextTick() const { index, isSubpage } = computeActiveIndex() currentActiveIndex.value = index subpageSelected.value = isSubpage