From 93da9fbcbe3b0cb49dd8239af51e30d371148d9e Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 26 Aug 2026 12:49:07 +0200
Subject: [PATCH] =?UTF-8?q?F=C3=BCge=20Scrollfunktion=20f=C3=BCr=20Mannsch?=
 =?UTF-8?q?aften-Untermen=C3=BC=20hinzu=20und=20optimiere=20Button-Interak?=
 =?UTF-8?q?tion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Navigation.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/Navigation.vue b/components/Navigation.vue
index 92e88e8..63f408d 100755
--- a/components/Navigation.vue
+++ b/components/Navigation.vue
@@ -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 () => {