components/Navigation.vue

@@ -5,11 +5,11 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
       <div class="flex flex-col justify-between h-full py-2">
         <!-- Hauptmenü -->
-        <div class="flex justify-between items-center">
+        <div class="flex min-w-0 items-center gap-3">
           <!-- Logo -->
           <NuxtLink
             to="/"
-            class="flex items-center space-x-3 hover:scale-105 transition-transform"
+            class="flex shrink-0 items-center space-x-3 origin-left hover:scale-[1.02] transition-transform"
           >
             <img
               src="~/assets/images/logos/Harheimer TC.svg"
@@ -23,9 +23,12 @@
             </div>
           </NuxtLink>
 
-          <div style="display:flex;flex-direction:column;">
+          <div class="flex min-w-0 flex-1 flex-col">
             <!-- Desktop Navigation -->
-            <div class="hidden lg:flex items-center space-x-1">
+            <div
+              class="hidden min-w-0 max-w-full lg:flex lg:items-center lg:gap-1 lg:overflow-x-auto lg:whitespace-nowrap [scrollbar-color:theme(colors.primary.700)_transparent] [scrollbar-width:thin]"
+              aria-label="Hauptmenü – horizontal scrollbar"
+            >
               <NuxtLink
                 to="/"
                 class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
@@ -111,10 +114,10 @@
               </NuxtLink>
             </div>
 
-            <div class="hidden lg:flex items-center h-6 min-w-0 border-t border-primary-700/20">
+            <div class="hidden min-w-0 flex-1 lg:flex items-center h-6 border-t border-primary-700/20">
               <div
                 v-if="currentSubmenu"
-                :class="currentSubmenu === 'mannschaften' ? 'relative min-w-0 flex-1' : 'flex items-center space-x-1'"
+                :class="currentSubmenu === 'mannschaften' ? 'relative min-w-0 flex-1' : 'flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap'"
               >
                 <!-- Newsletter Submenu -->
                 <template v-if="currentSubmenu === 'newsletter'">
@@ -207,7 +210,7 @@
                     >
                       <NuxtLink
                         :to="`/mannschaften/${mannschaft.slug}`"
-                        class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                        class="shrink-0 whitespace-nowrap px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                         active-class="text-white bg-primary-600"
                       >
                         {{ mannschaft.mannschaft }}
@@ -223,7 +226,7 @@
                     </NuxtLink>
                     <NuxtLink
                       to="/spielsysteme"
-                      class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                      class="shrink-0 whitespace-nowrap px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                       active-class="text-white bg-primary-600"
                     >
                       Spielsysteme

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "harheimertc-website",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "harheimertc-website",
-      "version": "1.8.6",
+      "version": "1.8.7",
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.11.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harheimertc-website",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "Moderne Webseite für den Harheimer Tischtennis Club",
   "private": true,
   "type": "module",