From 966e244729cbdc19fab7b202b06d6379847df774 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Mon, 6 Oct 2025 17:29:10 -0400
Subject: [PATCH] Mobile layout adjustments

---
 pages/[slug].vue | 21 +++++++++++++++++++++
 pages/index.vue  | 44 +++++++++++++++++++++++++++++++++++++++++++-
 pages/login.vue  |  4 +---
 3 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/pages/[slug].vue b/pages/[slug].vue
index c3f1ee5..f095335 100644
--- a/pages/[slug].vue
+++ b/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 {
diff --git a/pages/index.vue b/pages/index.vue
index 89af26f..ebba001 100644
--- a/pages/index.vue
+++ b/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!
diff --git a/pages/login.vue b/pages/login.vue
index 4debf78..30a9d6d 100644
--- a/pages/login.vue
+++ b/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>