Füge Scrollfunktion für Mannschaften-Untermenü hinzu und optimiere Button-Interaktion
This commit is contained in:
@@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user