Add global auth state with composable for reactive login status

components/Footer.vue

@@ -93,45 +93,30 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { User, ChevronUp } from 'lucide-vue-next'
 
 const router = useRouter()
 const currentYear = new Date().getFullYear()
 const isMemberMenuOpen = ref(false)
-const isLoggedIn = ref(false)
-const userRole = ref(null)
 
-const isAdmin = computed(() => {
-  return userRole.value === 'admin' || userRole.value === 'vorstand'
-})
+// Use global auth state
+const { isLoggedIn, isAdmin, logout: authLogout, checkAuth } = useAuth()
 
 const toggleMemberMenu = () => {
   isMemberMenuOpen.value = !isMemberMenuOpen.value
 }
 
 const handleLogout = async () => {
-  try {
-    await $fetch('/api/auth/logout', { method: 'POST' })
-    isLoggedIn.value = false
-    userRole.value = null
-    isMemberMenuOpen.value = false
-    router.push('/')
-  } catch (error) {
-    console.error('Logout fehlgeschlagen:', error)
-  }
+  await authLogout()
+  isMemberMenuOpen.value = false
+  router.push('/')
 }
 
 // Check auth status on mount
-onMounted(async () => {
-  try {
-    const response = await $fetch('/api/auth/status')
-    isLoggedIn.value = response.isLoggedIn
-    userRole.value = response.role
-  } catch (error) {
-    isLoggedIn.value = false
-  }
+onMounted(() => {
+  checkAuth()
 })
 
 // Close menu when clicking outside

components/Navigation.vue

@@ -400,12 +400,9 @@ 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'
-})
+// Use global auth state
+const { isLoggedIn, userRole, isAdmin, checkAuth } = useAuth()
 
        // Automatisches Setzen des Submenus basierend auf der Route
        const currentSubmenu = computed(() => {
@@ -486,21 +483,10 @@ 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()
+  checkAuth()
 })
 
        const toggleSubmenu = (menu) => {