627 lines
33 KiB
Vue
627 lines
33 KiB
Vue
<template>
|
|
<nav
|
|
class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-gray-900 via-primary-900 to-gray-900 shadow-xl h-20">
|
|
<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">
|
|
<!-- Logo -->
|
|
<NuxtLink to="/" class="flex items-center space-x-3 hover:scale-105 transition-transform">
|
|
<img src="~/assets/images/logos/Harheimer TC.svg" alt="Harheimer TC Logo" class="w-12 h-12" />
|
|
<div class="hidden sm:block">
|
|
<span class="text-xl font-display font-bold text-white">Harheimer <span
|
|
class="text-primary-400">TC</span></span>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
<div style="display:flex;flex-direction:column;">
|
|
<!-- Desktop Navigation -->
|
|
<div class="hidden lg:flex items-center space-x-1">
|
|
<NuxtLink to="/"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
active-class="text-white bg-primary-600">
|
|
Start
|
|
</NuxtLink>
|
|
|
|
<button @click="toggleSubmenu('verein')"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
:class="(route.path.startsWith('/verein/') || route.path.startsWith('/vorstand') || route.path.startsWith('/vereinsmeisterschaften') || currentSubmenu === 'verein') ? 'text-white bg-primary-600' : ''">
|
|
Verein
|
|
</button>
|
|
|
|
<button @click="toggleSubmenu('mannschaften')"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
:class="(route.path.startsWith('/mannschaften') || route.path.startsWith('/spielsysteme') || currentSubmenu === 'mannschaften') ? 'text-white bg-primary-600' : ''">
|
|
Mannschaften
|
|
</button>
|
|
|
|
<button @click="toggleSubmenu('training')"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
:class="(route.path.startsWith('/training') || route.path.startsWith('/tt-regeln') || currentSubmenu === 'training') ? 'text-white bg-primary-600' : ''">
|
|
Training
|
|
</button>
|
|
|
|
<NuxtLink to="/mitgliedschaft"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
active-class="text-white bg-primary-600">
|
|
Mitgliedschaft
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/termine" @click="currentSubmenu = null"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
active-class="text-white bg-primary-600">
|
|
Termine
|
|
</NuxtLink>
|
|
|
|
<NuxtLink v-if="hasGalleryImages" to="/galerie" @click="currentSubmenu = null"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
active-class="text-white bg-primary-600">
|
|
Galerie
|
|
</NuxtLink>
|
|
|
|
<button v-if="isLoggedIn" @click="toggleSubmenu('intern')"
|
|
class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
|
|
:class="(route.path.startsWith('/mitgliederbereich') || route.path.startsWith('/cms') || currentSubmenu === 'intern') ? 'text-white bg-primary-600' : ''">
|
|
Intern
|
|
</button>
|
|
|
|
<NuxtLink to="/kontakt" @click="currentSubmenu = null"
|
|
class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold transition-all rounded-lg shadow-lg">
|
|
Kontakt
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="hidden lg:flex items-center h-6 border-t border-primary-700/20">
|
|
<div v-if="currentSubmenu" class="flex items-center space-x-1">
|
|
<!-- Verein Submenu -->
|
|
<template v-if="currentSubmenu === 'verein'">
|
|
<NuxtLink to="/verein/ueber-uns"
|
|
class="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">
|
|
Über uns
|
|
</NuxtLink>
|
|
<NuxtLink to="/vorstand"
|
|
class="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">
|
|
Vorstand
|
|
</NuxtLink>
|
|
<NuxtLink to="/verein/geschichte"
|
|
class="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">
|
|
Geschichte
|
|
</NuxtLink>
|
|
<NuxtLink to="/verein/satzung"
|
|
class="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">
|
|
Satzung
|
|
</NuxtLink>
|
|
<NuxtLink to="/vereinsmeisterschaften"
|
|
class="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">
|
|
Vereinsmeisterschaften
|
|
</NuxtLink>
|
|
<NuxtLink to="/verein/galerie"
|
|
class="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">
|
|
Galerie
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<!-- Mannschaften Submenu -->
|
|
<template v-if="currentSubmenu === 'mannschaften'">
|
|
<NuxtLink to="/mannschaften"
|
|
class="px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
|
|
active-class="bg-primary-600">
|
|
Übersicht
|
|
</NuxtLink>
|
|
<div class="h-3 w-px bg-primary-700" />
|
|
<template v-for="mannschaft in mannschaften" :key="mannschaft.slug">
|
|
<NuxtLink :to="`/mannschaften/${mannschaft.slug}`"
|
|
class="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 }}
|
|
</NuxtLink>
|
|
</template>
|
|
<div class="h-3 w-px bg-primary-700" />
|
|
<NuxtLink to="/mannschaften/spielplaene"
|
|
class="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">
|
|
Spielpläne
|
|
</NuxtLink>
|
|
<NuxtLink to="/spielsysteme"
|
|
class="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
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<!-- Training Submenu -->
|
|
<template v-if="currentSubmenu === 'training'">
|
|
<NuxtLink to="/training"
|
|
class="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">
|
|
Trainingszeiten
|
|
</NuxtLink>
|
|
<NuxtLink to="/training/trainer"
|
|
class="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">
|
|
Trainer
|
|
</NuxtLink>
|
|
<NuxtLink to="/training/anfaenger"
|
|
class="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">
|
|
Anfänger
|
|
</NuxtLink>
|
|
<NuxtLink to="/tt-regeln"
|
|
class="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">
|
|
TT-Regeln
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<!-- Intern Submenu -->
|
|
<template v-if="currentSubmenu === 'intern'">
|
|
<NuxtLink to="/mitgliederbereich"
|
|
class="px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
|
|
active-class="bg-primary-600">
|
|
Übersicht
|
|
</NuxtLink>
|
|
<div class="h-3 w-px bg-primary-700" />
|
|
<NuxtLink to="/mitgliederbereich/mitglieder"
|
|
class="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">
|
|
Mitgliederliste
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/news"
|
|
class="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">
|
|
News
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/profil"
|
|
class="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">
|
|
Mein Profil
|
|
</NuxtLink>
|
|
<div class="h-3 w-px bg-primary-700" />
|
|
<NuxtLink to="/mitgliederbereich/api"
|
|
class="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">
|
|
API-Dokumentation
|
|
</NuxtLink>
|
|
<template v-if="isAdmin">
|
|
<div class="h-3 w-px bg-primary-700" />
|
|
<div class="relative inline-block">
|
|
<button @click.stop="toggleCmsDropdown"
|
|
class="px-2.5 py-1 text-xs text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded transition-all flex items-center"
|
|
:class="route.path.startsWith('/cms') ? 'text-white bg-primary-600' : ''">
|
|
CMS
|
|
<ChevronDown :size="12" class="ml-1"
|
|
:class="['transition-transform', showCmsDropdown ? 'rotate-180' : '']" />
|
|
</button>
|
|
|
|
<!-- CMS Dropdown -->
|
|
<div v-if="showCmsDropdown"
|
|
class="absolute left-0 top-full mt-1 w-48 bg-gray-800 border border-gray-700 rounded-lg shadow-xl overflow-hidden z-50">
|
|
<NuxtLink to="/cms" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Übersicht
|
|
</NuxtLink>
|
|
<div class="border-t border-gray-700 my-1"></div>
|
|
<NuxtLink to="/cms/ueber-uns" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Über uns
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/geschichte" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Geschichte
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/tt-regeln" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
TT-Regeln
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/satzung" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Satzung
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/vereinsmeisterschaften" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Vereinsmeisterschaften
|
|
</NuxtLink>
|
|
<div class="border-t border-gray-700 my-1"></div>
|
|
<NuxtLink to="/mitgliederbereich/news" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
News
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/termine" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Termine
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/spielplaene" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Spielpläne
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/mitglieder" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Mitglieder
|
|
</NuxtLink>
|
|
<div class="border-t border-gray-700 my-1"></div>
|
|
<NuxtLink to="/cms/einstellungen" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Einstellungen
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/mitgliedschaftsantraege" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Mitgliedschaftsanträge
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/benutzer" @click="showCmsDropdown = false"
|
|
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
|
|
Benutzerverwaltung
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button @click="isMobileMenuOpen = !isMobileMenuOpen"
|
|
class="lg:hidden p-2 rounded-lg hover:bg-primary-700/50 transition-colors" aria-label="Toggle menu">
|
|
<X v-if="isMobileMenuOpen" :size="24" class="text-white" />
|
|
<Menu v-else :size="24" class="text-white" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Untermenü (Desktop) - im gleichen Block, immer gleiche Höhe -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<Transition enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="opacity-0 transform -translate-y-2" enter-to-class="opacity-100 transform translate-y-0"
|
|
leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100 transform translate-y-0"
|
|
leave-to-class="opacity-0 transform -translate-y-2">
|
|
<div v-if="isMobileMenuOpen"
|
|
class="lg:hidden bg-gray-800 border-t border-primary-700/30 max-h-[80vh] overflow-y-auto">
|
|
<div class="px-4 py-4 space-y-2">
|
|
<NuxtLink to="/" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Start
|
|
</NuxtLink>
|
|
|
|
<!-- Verein Mobile -->
|
|
<div>
|
|
<button @click="toggleMobileSubmenu('verein')"
|
|
class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Verein
|
|
<ChevronDown :size="16"
|
|
:class="['transition-transform', mobileSubmenu === 'verein' ? 'rotate-180' : '']" />
|
|
</button>
|
|
<div v-if="mobileSubmenu === 'verein'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
|
|
<NuxtLink to="/verein/ueber-uns" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Über uns
|
|
</NuxtLink>
|
|
<NuxtLink to="/vorstand" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Vorstand
|
|
</NuxtLink>
|
|
<NuxtLink to="/verein/geschichte" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Geschichte
|
|
</NuxtLink>
|
|
<NuxtLink to="/verein/satzung" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Satzung
|
|
</NuxtLink>
|
|
<NuxtLink to="/vereinsmeisterschaften" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Vereinsmeisterschaften
|
|
</NuxtLink>
|
|
<NuxtLink to="/verein/galerie" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Galerie
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mannschaften Mobile -->
|
|
<div>
|
|
<button @click="toggleMobileSubmenu('mannschaften')"
|
|
class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Mannschaften
|
|
<ChevronDown :size="16"
|
|
:class="['transition-transform', mobileSubmenu === 'mannschaften' ? 'rotate-180' : '']" />
|
|
</button>
|
|
<div v-if="mobileSubmenu === 'mannschaften'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
|
|
<NuxtLink to="/mannschaften" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm font-semibold text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Übersicht
|
|
</NuxtLink>
|
|
<template v-for="mannschaft in mannschaften" :key="mannschaft.slug">
|
|
<NuxtLink :to="`/mannschaften/${mannschaft.slug}`" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
{{ mannschaft.mannschaft }}
|
|
</NuxtLink>
|
|
</template>
|
|
<div class="border-t border-primary-700/20 my-2" />
|
|
<NuxtLink to="/mannschaften/spielplaene" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Spielpläne
|
|
</NuxtLink>
|
|
<NuxtLink to="/spielsysteme" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Spielsysteme
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Training Mobile -->
|
|
<div>
|
|
<button @click="toggleMobileSubmenu('training')"
|
|
class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Training
|
|
<ChevronDown :size="16"
|
|
:class="['transition-transform', mobileSubmenu === 'training' ? 'rotate-180' : '']" />
|
|
</button>
|
|
<div v-if="mobileSubmenu === 'training'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
|
|
<NuxtLink to="/training" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Trainingszeiten
|
|
</NuxtLink>
|
|
<NuxtLink to="/training/trainer" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Trainer
|
|
</NuxtLink>
|
|
<NuxtLink to="/training/anfaenger" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Anfänger
|
|
</NuxtLink>
|
|
<NuxtLink to="/tt-regeln" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
TT-Regeln
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<NuxtLink to="/mitgliedschaft" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Mitgliedschaft
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/termine" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Termine
|
|
</NuxtLink>
|
|
|
|
<NuxtLink v-if="hasGalleryImages" to="/galerie" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Galerie
|
|
</NuxtLink>
|
|
|
|
<!-- Intern Mobile -->
|
|
<div v-if="isLoggedIn">
|
|
<button @click="toggleMobileSubmenu('intern')"
|
|
class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
|
|
Intern
|
|
<ChevronDown :size="16"
|
|
:class="['transition-transform', mobileSubmenu === 'intern' ? 'rotate-180' : '']" />
|
|
</button>
|
|
<div v-if="mobileSubmenu === 'intern'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
|
|
<NuxtLink to="/mitgliederbereich" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm font-semibold text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Übersicht
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/mitglieder" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Mitgliederliste
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/news" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
News
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/profil" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Mein Profil
|
|
</NuxtLink>
|
|
<template v-if="isAdmin">
|
|
<div class="border-t border-primary-700/20 my-2" />
|
|
<NuxtLink to="/cms" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm font-semibold text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
CMS Übersicht
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/news" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
News
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/termine" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Termine
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/spielplaene" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Spielpläne
|
|
</NuxtLink>
|
|
<NuxtLink to="/mitgliederbereich/mitglieder" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Mitglieder
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/ueber-uns" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Über uns
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/geschichte" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Geschichte
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/tt-regeln" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
TT-Regeln
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/satzung" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Satzung
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/vereinsmeisterschaften" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Vereinsmeisterschaften
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/einstellungen" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Einstellungen
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/mitgliedschaftsantraege" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Mitgliedschaftsanträge
|
|
</NuxtLink>
|
|
<NuxtLink to="/cms/benutzer" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
|
|
Benutzerverwaltung
|
|
</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<NuxtLink to="/kontakt" @click="isMobileMenuOpen = false"
|
|
class="block px-4 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-semibold transition-colors">
|
|
Kontakt
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { Menu, X, ChevronDown } from 'lucide-vue-next'
|
|
|
|
const route = useRoute()
|
|
const authStore = useAuthStore()
|
|
const isMobileMenuOpen = ref(false)
|
|
const mobileSubmenu = ref(null)
|
|
const mannschaften = ref([])
|
|
const hasGalleryImages = ref(false)
|
|
const showCmsDropdown = ref(false)
|
|
|
|
// Reactive auth state from store
|
|
const isLoggedIn = computed(() => authStore.isLoggedIn)
|
|
const isAdmin = computed(() => authStore.isAdmin)
|
|
|
|
// Automatisches Setzen des Submenus basierend auf der Route
|
|
const currentSubmenu = computed(() => {
|
|
const path = route.path
|
|
if (path.startsWith('/verein/') || path.startsWith('/vorstand') ||
|
|
path.startsWith('/vereinsmeisterschaften')) {
|
|
return 'verein'
|
|
}
|
|
if (path.startsWith('/mannschaften') || path.startsWith('/spielsysteme')) {
|
|
return 'mannschaften'
|
|
}
|
|
if (path.startsWith('/training') || path.startsWith('/tt-regeln')) {
|
|
return 'training'
|
|
}
|
|
if (path.startsWith('/mitgliederbereich') || path.startsWith('/cms')) {
|
|
return 'intern'
|
|
}
|
|
return null
|
|
})
|
|
|
|
const toggleMobileSubmenu = (menu) => {
|
|
mobileSubmenu.value = mobileSubmenu.value === menu ? null : menu
|
|
}
|
|
|
|
const loadMannschaften = async () => {
|
|
try {
|
|
const response = await fetch('/data/mannschaften.csv')
|
|
if (!response.ok) return
|
|
|
|
const csv = await response.text()
|
|
const lines = csv.split('\n').filter(line => line.trim() !== '')
|
|
|
|
if (lines.length < 2) return
|
|
|
|
mannschaften.value = lines.slice(1).map(line => {
|
|
// Besserer CSV-Parser: Respektiert Anführungszeichen
|
|
const values = []
|
|
let current = ''
|
|
let inQuotes = false
|
|
|
|
for (let i = 0; i < line.length; i++) {
|
|
const char = line[i]
|
|
|
|
if (char === '"') {
|
|
inQuotes = !inQuotes
|
|
} else if (char === ',' && !inQuotes) {
|
|
values.push(current.trim())
|
|
current = ''
|
|
} else {
|
|
current += char
|
|
}
|
|
}
|
|
values.push(current.trim())
|
|
|
|
if (!values[0]) return null
|
|
|
|
return {
|
|
mannschaft: values[0].trim(),
|
|
slug: values[0].trim().toLowerCase().replace(/\s+/g, '-')
|
|
}
|
|
}).filter(mannschaft => mannschaft !== null)
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Mannschaften:', error)
|
|
}
|
|
}
|
|
|
|
const checkGalleryImages = async () => {
|
|
try {
|
|
const response = await $fetch('/api/galerie')
|
|
hasGalleryImages.value = response && response.length > 0
|
|
} catch (error) {
|
|
console.error('Fehler beim Prüfen der Galerie-Bilder:', error)
|
|
hasGalleryImages.value = false
|
|
}
|
|
}
|
|
|
|
const toggleCmsDropdown = () => {
|
|
showCmsDropdown.value = !showCmsDropdown.value
|
|
}
|
|
|
|
const handleDocumentClick = (e) => {
|
|
if (!e.target.closest('.relative.inline-block')) {
|
|
showCmsDropdown.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadMannschaften()
|
|
checkGalleryImages()
|
|
authStore.checkAuth()
|
|
|
|
// Close CMS dropdown when clicking outside
|
|
document.addEventListener('click', handleDocumentClick)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', handleDocumentClick)
|
|
})
|
|
|
|
const toggleSubmenu = (menu) => {
|
|
// Wenn wir schon im richtigen Bereich sind, nichts tun (Submenu bleibt offen)
|
|
// Wenn nicht, zur Hauptseite navigieren
|
|
const path = route.path
|
|
|
|
if (menu === 'verein' && !path.startsWith('/verein/') && !path.startsWith('/vorstand') && !path.startsWith('/vereinsmeisterschaften')) {
|
|
navigateTo('/verein/ueber-uns')
|
|
} else if (menu === 'mannschaften' && !path.startsWith('/mannschaften') && !path.startsWith('/spielsysteme')) {
|
|
navigateTo('/mannschaften')
|
|
} else if (menu === 'training' && !path.startsWith('/training') && !path.startsWith('/tt-regeln')) {
|
|
navigateTo('/training')
|
|
} else if (menu === 'intern' && !path.startsWith('/mitgliederbereich') && !path.startsWith('/cms')) {
|
|
navigateTo('/mitgliederbereich')
|
|
}
|
|
}
|
|
</script>
|