Mobile layout adjustments

pages/[slug].vue

@@ -20,6 +20,22 @@
               </select>
             </div>
             <QRCodeButton v-if="sermon" :sermon="sermon" />
+            <ClientOnly fallback-tag="div">
+              <button
+                v-if="isAuthenticated"
+                @click="handleLogout"
+                class="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 whitespace-nowrap"
+              >
+                Log Out
+              </button>
+              <NuxtLink 
+                v-else
+                to="/login" 
+                class="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 whitespace-nowrap"
+              >
+                Log In
+              </NuxtLink>
+            </ClientOnly>
           </div>
         </div>
       </div>
@@ -218,6 +234,11 @@ function handleNotesChange() {
   }, 1000)
 }
 
+async function handleLogout() {
+  await $fetch('/api/auth/logout', { method: 'POST' })
+  window.location.reload()
+}
+
 const bibleReferences = computed(() => {
   if (!sermon.value?.bible_references) return []
   try {

pages/index.vue

@@ -3,7 +3,48 @@
     <!-- Header -->
     <header class="bg-white shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="flex items-center justify-between">
+        <!-- Mobile Layout -->
+        <div class="md:hidden">
+          <div class="flex items-center justify-center mb-4">
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
+          </div>
+          <div class="flex flex-wrap items-center justify-center gap-2">
+            <ClientOnly fallback-tag="div">
+              <template v-if="isAuthenticated">
+                <NuxtLink 
+                  v-if="isAdmin"
+                  to="/admin" 
+                  class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-xs whitespace-nowrap"
+                >
+                  Manage Sermons
+                </NuxtLink>
+                <NuxtLink 
+                  v-if="isAdmin"
+                  to="/users" 
+                  class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium text-xs whitespace-nowrap"
+                >
+                  Manage Users
+                </NuxtLink>
+                <button
+                  @click="handleLogout"
+                  class="px-3 py-2 text-xs font-medium text-blue-600 hover:text-blue-700"
+                >
+                  Log Out
+                </button>
+              </template>
+              <NuxtLink 
+                v-else
+                to="/login" 
+                class="px-3 py-2 text-xs font-medium text-blue-600 hover:text-blue-700"
+              >
+                Log In
+              </NuxtLink>
+            </ClientOnly>
+          </div>
+        </div>
+
+        <!-- Desktop Layout -->
+        <div class="hidden md:flex items-center justify-between">
           <div class="flex items-center space-x-4">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           </div>
@@ -44,6 +85,7 @@
             </ClientOnly>
           </div>
         </div>
+
         <div class="text-center mt-6">
           <h1 class="text-3xl font-bold text-gray-900">
             Welcome to New Life!

pages/login.vue

@@ -3,9 +3,7 @@
     <div class="flex-1 flex items-center justify-center px-4">
       <div class="max-w-md w-full">
       <div class="text-center mb-8">
-        <NuxtLink to="/">
-          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4 cursor-pointer hover:opacity-80" />
-        </NuxtLink>
+        <img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4" />
         <h2 class="text-3xl font-bold text-gray-900">{{ isRegistering ? 'Create Account' : 'Log In' }}</h2>
         <p class="mt-2 text-sm text-gray-600">{{ isRegistering ? 'Create a new account' : 'Sign in to your account' }}</p>
       </div>