Fix favicon and add authentication state to main page with logout/create sermon buttons

pages/index.vue

@@ -7,12 +7,29 @@
           <div class="flex items-center space-x-4">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           </div>
-          <NuxtLink 
-            to="/login" 
-            class="text-sm font-medium text-blue-600 hover:text-blue-700"
-          >
-            Admin Login
-          </NuxtLink>
+          <div class="flex items-center gap-4">
+            <template v-if="isAuthenticated">
+              <NuxtLink 
+                to="/admin" 
+                class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm"
+              >
+                Create New Sermon
+              </NuxtLink>
+              <button
+                @click="handleLogout"
+                class="text-sm font-medium text-red-600 hover:text-red-700"
+              >
+                Logout
+              </button>
+            </template>
+            <NuxtLink 
+              v-else
+              to="/login" 
+              class="text-sm font-medium text-blue-600 hover:text-blue-700"
+            >
+              Admin Login
+            </NuxtLink>
+          </div>
         </div>
         <div class="text-center mt-6">
           <h1 class="text-3xl font-bold text-gray-900">
@@ -73,6 +90,10 @@
 <script setup lang="ts">
 const showOlder = ref(false)
 
+// Check authentication status
+const { data: authData } = await useFetch('/api/auth/verify')
+const isAuthenticated = computed(() => authData.value?.authenticated || false)
+
 // Fetch all sermons
 const { data: allSermons } = await useFetch('/api/sermons')
 
@@ -96,4 +117,9 @@ const olderSermons = computed(() => {
     return sermonDate < threeMonthsAgo
   })
 })
+
+async function handleLogout() {
+  await $fetch('/api/auth/logout', { method: 'POST' })
+  await navigateTo('/login')
+}
 </script>