From 00b08e2f92693b6344ebaba3d2bb3bef8e3de23d Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 26 Aug 2026 13:51:07 +0200
Subject: [PATCH] =?UTF-8?q?F=C3=BCge=20Scrollsteuerung=20f=C3=BCr=20Mannsc?=
 =?UTF-8?q?haften-Untermen=C3=BC=20hinzu=20und=20optimiere=20Importpfade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Navigation.vue                    | 47 +++++++++++++++++++-
 pages/mannschaften/[slug].vue                |  2 +-
 pages/mannschaften/spielplaene.vue           |  2 +-
 server/api/homepage/spielplan-options.get.js |  2 +-
 server/api/spielplan/pdf.get.js              |  2 +-
 5 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/components/Navigation.vue b/components/Navigation.vue
index 63f408d..97f5462 100755
--- a/components/Navigation.vue
+++ b/components/Navigation.vue
@@ -193,9 +193,10 @@
                 <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]"
+                    class="flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap scroll-smooth px-7 [scrollbar-color:theme(colors.primary.700)_transparent] [scrollbar-width:thin]"
                     tabindex="0"
                     aria-label="Mannschaften-Untermenü – horizontal scrollbar"
+                    @scroll.passive="updateMannschaftenSubmenuControls"
                   >
                     <NuxtLink
                       to="/mannschaften"
@@ -234,6 +235,17 @@
                     </NuxtLink>
                   </div>
                   <button
+                    v-if="showMannschaftenSubmenuLeftControl"
+                    type="button"
+                    class="absolute inset-y-0 left-0 z-10 flex w-9 items-center justify-start bg-gradient-to-r from-primary-900 via-primary-900/90 to-transparent pl-1 text-primary-300 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300"
+                    aria-label="Vorherige Mannschaften anzeigen"
+                    @pointerdown.stop
+                    @click.stop.prevent="scrollMannschaftenSubmenuLeft"
+                  >
+                    ‹
+                  </button>
+                  <button
+                    v-if="showMannschaftenSubmenuRightControl"
                     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"
@@ -872,7 +884,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, nextTick, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { Menu, X, ChevronDown } from 'lucide-vue-next'
 
@@ -881,6 +893,8 @@ const isMobileMenuOpen = ref(false)
 const mobileSubmenu = ref(null)
 const mannschaften = ref([])
 const mannschaftenSubmenuRail = ref(null)
+const showMannschaftenSubmenuLeftControl = ref(false)
+const showMannschaftenSubmenuRightControl = ref(false)
 const hasGalleryImages = ref(false)
 const showCmsDropdown = ref(false)
 const authStore = useAuthStore()
@@ -918,6 +932,28 @@ const toggleMobileSubmenu = (menu) => {
   mobileSubmenu.value = mobileSubmenu.value === menu ? null : menu
 }
 
+const updateMannschaftenSubmenuControls = () => {
+  const rail = mannschaftenSubmenuRail.value
+  if (!rail) return
+
+  const canScroll = rail.scrollWidth > rail.clientWidth + 1
+  const atStart = rail.scrollLeft <= 1
+  const atEnd = rail.scrollLeft + rail.clientWidth >= rail.scrollWidth - 1
+
+  showMannschaftenSubmenuLeftControl.value = canScroll && !atStart
+  showMannschaftenSubmenuRightControl.value = canScroll && !atEnd
+}
+
+const scrollMannschaftenSubmenuLeft = () => {
+  const rail = mannschaftenSubmenuRail.value
+  if (!rail) return
+
+  rail.scrollBy({
+    left: -Math.max(rail.clientWidth * 0.8, 160),
+    behavior: 'smooth'
+  })
+}
+
 const scrollMannschaftenSubmenuRight = () => {
   const rail = mannschaftenSubmenuRail.value
   if (!rail) return
@@ -1012,16 +1048,23 @@ onMounted(() => {
   // Listen for global updates to mannschaften (e.g., CMS saved)
   if (typeof window !== 'undefined') {
     window.addEventListener('mannschaften:changed', loadMannschaften)
+    window.addEventListener('resize', updateMannschaftenSubmenuControls)
   }
+  nextTick(updateMannschaftenSubmenuControls)
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', handleDocumentClick)
   if (typeof window !== 'undefined') {
     window.removeEventListener('mannschaften:changed', loadMannschaften)
+    window.removeEventListener('resize', updateMannschaftenSubmenuControls)
   }
 })
 
+watch([currentSubmenu, mannschaften], () => {
+  nextTick(updateMannschaftenSubmenuControls)
+}, { flush: 'post' })
+
 const toggleSubmenu = (menu) => {
   // Wenn wir schon im richtigen Bereich sind, nichts tun (Submenu bleibt offen)
   // Wenn nicht, zur Hauptseite navigieren
diff --git a/pages/mannschaften/[slug].vue b/pages/mannschaften/[slug].vue
index 39a838d..f7ddd7a 100755
--- a/pages/mannschaften/[slug].vue
+++ b/pages/mannschaften/[slug].vue
@@ -362,7 +362,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { rowMatchesTeamFilter } from '../../utils/spielplan-filter.js'
+import { rowMatchesTeamFilter } from '~/utils/spielplan-filter.js'
 
 const route = useRoute()
 
diff --git a/pages/mannschaften/spielplaene.vue b/pages/mannschaften/spielplaene.vue
index 2b18db9..9f64f5f 100755
--- a/pages/mannschaften/spielplaene.vue
+++ b/pages/mannschaften/spielplaene.vue
@@ -360,7 +360,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { filterSpielplanRows, toApiTeamParam } from '../../utils/spielplan-filter.js'
+import { filterSpielplanRows, toApiTeamParam } from '~/utils/spielplan-filter.js'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/server/api/homepage/spielplan-options.get.js b/server/api/homepage/spielplan-options.get.js
index e67aa59..64c3af7 100755
--- a/server/api/homepage/spielplan-options.get.js
+++ b/server/api/homepage/spielplan-options.get.js
@@ -1,5 +1,5 @@
 import { listSpielplanSeasons, readSpielplanData, validateSeasonSlug } from '../../utils/spielplan-data.js'
-import { formatTeamDisplayName } from '../../../utils/team-display.js'
+import { formatTeamDisplayName } from '~/utils/team-display.js'
 
 function teamLabel(teamName, teamAgeGroup, competitionAgeGroup) {
   return formatTeamDisplayName(teamName, teamAgeGroup, competitionAgeGroup)
diff --git a/server/api/spielplan/pdf.get.js b/server/api/spielplan/pdf.get.js
index 9e2a74d..a192f6e 100755
--- a/server/api/spielplan/pdf.get.js
+++ b/server/api/spielplan/pdf.get.js
@@ -2,7 +2,7 @@ import fs from 'fs/promises'
 import path from 'path'
 import { readSpielplanData, validateSeasonSlug } from '../../utils/spielplan-data.js'
 import { info as loggerInfo, error as loggerError } from '../../utils/logger.js'
-import { filterSpielplanRows } from '../../../utils/spielplan-filter.js'
+import { filterSpielplanRows } from '~/utils/spielplan-filter.js'
 
 function seasonSlugToLabel(slug) {
   const match = String(slug || '').match(/^(\d{2})--(\d{2})$/)