Replace composable with Pinia store for persistent auth state

components/Footer.vue

@@ -93,30 +93,32 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { User, ChevronUp } from 'lucide-vue-next'
 
 const router = useRouter()
+const authStore = useAuthStore()
 const currentYear = new Date().getFullYear()
 const isMemberMenuOpen = ref(false)
 
-// Use global auth state
-const { isLoggedIn, isAdmin, logout: authLogout, checkAuth } = useAuth()
+// Reactive auth state from store
+const isLoggedIn = computed(() => authStore.isLoggedIn)
+const isAdmin = computed(() => authStore.isAdmin)
 
 const toggleMemberMenu = () => {
   isMemberMenuOpen.value = !isMemberMenuOpen.value
 }
 
 const handleLogout = async () => {
-  await authLogout()
+  await authStore.logout()
   isMemberMenuOpen.value = false
   router.push('/')
 }
 
 // Check auth status on mount
 onMounted(() => {
-  checkAuth()
+  authStore.checkAuth()
 })
 
 // Close menu when clicking outside

components/Navigation.vue

@@ -396,13 +396,15 @@ 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)
 
-// Use global auth state
-const { isLoggedIn, userRole, isAdmin, checkAuth } = useAuth()
+// 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(() => {
@@ -486,7 +488,7 @@ const checkGalleryImages = async () => {
 onMounted(() => {
   loadMannschaften()
   checkGalleryImages()
-  checkAuth()
+  authStore.checkAuth()
 })
 
        const toggleSubmenu = (menu) => {