torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 'Intern' menu for logged-in users with submenu navigation

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-21 11:37:26 +02:00
parent 96ff9e5d44
commit af6aef6d8f
67 changed files with 1075 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
components/Navigation.vue
View File

@@ -66,6 +66,14 @@
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
@@ -155,6 +163,44 @@
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">
Interne 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>
<template v-if="isAdmin">
<div class="h-3 w-px bg-primary-700" />
<NuxtLink to="/cms"
class="px-2.5 py-1 text-xs text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
active-class="text-white bg-primary-600">
CMS
</NuxtLink>
<NuxtLink to="/cms/benutzer"
class="px-2.5 py-1 text-xs text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
active-class="text-white bg-primary-600">
Benutzerverwaltung
</NuxtLink>
</template>
</template>
</div>
</div>
@@ -295,6 +341,45 @@
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">
Interne 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 text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
CMS
</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
@@ -315,6 +400,12 @@ const isMobileMenuOpen = ref(false)
const mobileSubmenu = ref(null)
const mannschaften = ref([])
const hasGalleryImages = ref(false)
const isLoggedIn = ref(false)
const userRole = ref(null)
const isAdmin = computed(() => {
return userRole.value === 'admin' || userRole.value === 'vorstand'
})
// Automatisches Setzen des Submenus basierend auf der Route
const currentSubmenu = computed(() => {
@@ -330,6 +421,9 @@ const hasGalleryImages = ref(false)
if (path.startsWith('/training') || path.startsWith('/tt-regeln')) {
return 'training'
}
if (path.startsWith('/mitgliederbereich') || path.startsWith('/cms')) {
return 'intern'
}
return null
})
@@ -392,9 +486,21 @@ const checkGalleryImages = async () => {
}
}
const checkAuthStatus = async () => {
try {
const response = await $fetch('/api/auth/status')
isLoggedIn.value = response.isLoggedIn
userRole.value = response.role
} catch (error) {
isLoggedIn.value = false
userRole.value = null
}
}
onMounted(() => {
loadMannschaften()
checkGalleryImages()
checkAuthStatus()
})
const toggleSubmenu = (menu) => {
@@ -409,6 +515,8 @@ onMounted(() => {
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>