MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure NavTabs slider aligns correctly with dynamic tabs (#5377)

Browse Source 
* fix(ui): ensure NavTabs slider aligns correctly with dynamic tabs

* fix: lint

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Qu1et-x
2026-02-20 00:57:17 +08:00
committed by GitHub
parent 30c48718e2
commit 9a83db2e67
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/frontend/src/components/ui/NavTabs.vue
View File

@@ -191,12 +191,20 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
} }
function getTabElement(index: number): HTMLElement | null { 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 const container = scrollContainer.value as HTMLElement | undefined
// In local mode, elements are plain divs if (!container) return null
const element = tabLinkElements.value[index]
return props.mode === 'navigation' ? (element as any).$el : element 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() { function positionSlider() {
@@ -253,7 +261,8 @@ function animateSliderTo(newPosition: {
sliderBottom.value = newPosition.bottom sliderBottom.value = newPosition.bottom
} }
function updateActiveTab() { async function updateActiveTab() {
await nextTick()
const { index, isSubpage } = computeActiveIndex() const { index, isSubpage } = computeActiveIndex()
currentActiveIndex.value = index currentActiveIndex.value = index
subpageSelected.value = isSubpage subpageSelected.value = isSubpage