Füge Scrollfunktion für Mannschaften-Untermenü hinzu und optimiere Button-Interaktion
All checks were successful
Code Analysis and Production Deploy / analyze (push) Successful in 9m39s
Code Analysis and Production Deploy / deploy-production (push) Has been skipped
Code Analysis and Production Deploy / deploy-test (push) Successful in 2m56s

This commit is contained in:
Torsten Schulz (local)
2026-08-26 12:49:07 +02:00
parent 82dcb1da40
commit 93da9fbcbe

View File

@@ -192,6 +192,7 @@
<!-- Mannschaften Submenu -->
<template v-if="currentSubmenu === 'mannschaften'">
<div
ref="mannschaftenSubmenuRail"
class="flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap scroll-smooth pr-7 [scrollbar-color:theme(colors.primary.700)_transparent] [scrollbar-width:thin]"
tabindex="0"
aria-label="Mannschaften-Untermenü horizontal scrollbar"
@@ -232,12 +233,15 @@
Spielsysteme
</NuxtLink>
</div>
<span
aria-hidden="true"
class="pointer-events-none absolute inset-y-0 right-0 flex w-9 items-center justify-end bg-gradient-to-l from-primary-900 via-primary-900/90 to-transparent text-primary-300"
<button
type="button"
class="absolute inset-y-0 right-0 z-10 flex w-9 items-center justify-end bg-gradient-to-l from-primary-900 via-primary-900/90 to-transparent pr-1 text-primary-300 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300"
aria-label="Weitere Mannschaften anzeigen"
@pointerdown.stop
@click.stop.prevent="scrollMannschaftenSubmenuRight"
>
</span>
</button>
</template>
<!-- Training Submenu -->
@@ -876,6 +880,7 @@ const route = useRoute()
const isMobileMenuOpen = ref(false)
const mobileSubmenu = ref(null)
const mannschaften = ref([])
const mannschaftenSubmenuRail = ref(null)
const hasGalleryImages = ref(false)
const showCmsDropdown = ref(false)
const authStore = useAuthStore()
@@ -913,6 +918,16 @@ const toggleMobileSubmenu = (menu) => {
mobileSubmenu.value = mobileSubmenu.value === menu ? null : menu
}
const scrollMannschaftenSubmenuRight = () => {
const rail = mannschaftenSubmenuRail.value
if (!rail) return
rail.scrollBy({
left: Math.max(rail.clientWidth * 0.8, 160),
behavior: 'smooth'
})
}
const loadMannschaften = async () => {
try {
const attempt = async () => {