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

Replace footer Mitglieder dropdown with direct Abmelden button when logged in

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-21 14:48:09 +02:00
parent cf2855be83
commit 55a70a1c98
31 changed files with 764 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/Footer.vue
View File

@@ -13,8 +13,17 @@
Kontakt
</NuxtLink>
<!-- Mitglieder Dropdown -->
<div class="relative">
<!-- Login/Logout -->
<template v-if="isLoggedIn">
<button
@click="handleLogout"
class="flex items-center space-x-1 text-gray-400 hover:text-primary-400 transition-colors"
>
<User :size="16" />
<span>Abmelden</span>
</button>
</template>
<div v-else class="relative">
<button
@click="toggleMemberMenu"
class="flex items-center space-x-1 text-gray-400 hover:text-primary-400 transition-colors"
@@ -24,7 +33,7 @@
<ChevronUp :size="14" :class="['transition-transform', isMemberMenuOpen ? 'rotate-0' : 'rotate-180']" />
</button>
<!-- Dropdown Menu (appears above) -->
<!-- Dropdown Menu (appears above) - Only when NOT logged in -->
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="transform translate-y-2 opacity-0"
@@ -37,52 +46,27 @@
v-if="isMemberMenuOpen"
class="absolute bottom-full right-0 mb-2 w-48 bg-gray-800 border border-gray-700 rounded-lg shadow-xl overflow-hidden"
>
<template v-if="isLoggedIn">
<NuxtLink
to="/mitgliederbereich"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Mitgliederbereich
</NuxtLink>
<NuxtLink
v-if="isAdmin"
to="/cms"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
CMS
</NuxtLink>
<button
@click="handleLogout"
class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Abmelden
</button>
</template>
<template v-else>
<NuxtLink
to="/login"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Anmelden
</NuxtLink>
<NuxtLink
to="/registrieren"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Registrieren
</NuxtLink>
<NuxtLink
to="/passwort-vergessen"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Passwort vergessen
</NuxtLink>
</template>
<NuxtLink
to="/login"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Anmelden
</NuxtLink>
<NuxtLink
to="/registrieren"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Registrieren
</NuxtLink>
<NuxtLink
to="/passwort-vergessen"
@click="isMemberMenuOpen = false"
class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
>
Passwort vergessen
</NuxtLink>
</div>
</Transition>
</div>
@@ -112,7 +96,6 @@ const toggleMemberMenu = () => {
const handleLogout = async () => {
await authStore.logout()
isMemberMenuOpen.value = false
router.push('/')
}