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

Add CMS dropdown in Intern submenu with termine editor

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-21 16:00:53 +02:00
parent 1cbfbaf754
commit 4af0b2a448
36 changed files with 948 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
components/Navigation.vue
View File

@@ -189,16 +189,48 @@
</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>
<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>
<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">
Interne 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="/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>
<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>
@@ -369,8 +401,20 @@
<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">
CMS
Interne 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="/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/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">
@@ -401,6 +445,7 @@ 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)
@@ -485,10 +530,21 @@ const checkGalleryImages = async () => {
}
}
const toggleCmsDropdown = () => {
showCmsDropdown.value = !showCmsDropdown.value
}
onMounted(() => {
loadMannschaften()
checkGalleryImages()
authStore.checkAuth()
// Close CMS dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('.relative.inline-block')) {
showCmsDropdown.value = false
}
})
})
const toggleSubmenu = (menu) => {