From cee37c78c4d9a9c9d618666bdbb9e0f9559191aa Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Thu, 6 Nov 2025 09:51:09 -0500
Subject: [PATCH] feat: Unify navigation with hamburger menu across all screen
 sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Renamed MobileMenu to Menu component (no longer mobile-only)
- Added 500ms debounce to prevent accidental double-tap menu toggles
- Improved click-outside detection using ref-based containment check
- Removed mobile/desktop navigation split - menu now consistent everywhere
- All pages now use single hamburger menu on both mobile and desktop
- Simplified header layouts across index, sermon, profile, admin, and users pages

This provides a cleaner, more consistent UX with the hamburger menu available
on all screen sizes. The debounce prevents the menu from closing accidentally
when navigating between pages or double-tapping.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/{MobileMenu.vue => Menu.vue} | 32 ++++++--
 pages/[slug].vue                        | 99 ++++++-------------------
 pages/admin.vue                         | 36 ++-------
 pages/index.vue                         | 77 +++----------------
 pages/profile.vue                       | 36 ++-------
 pages/users.vue                         | 36 ++-------
 6 files changed, 81 insertions(+), 235 deletions(-)
 rename components/{MobileMenu.vue => Menu.vue} (82%)

diff --git a/components/MobileMenu.vue b/components/Menu.vue
similarity index 82%
rename from components/MobileMenu.vue
rename to components/Menu.vue
index 0e635c7..87fa738 100644
--- a/components/MobileMenu.vue
+++ b/components/Menu.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="relative">
+  <div class="relative" ref="menuContainer">
     <!-- Hamburger Button -->
     <button
-      @click="isOpen = !isOpen"
-      class="p-2 text-gray-700 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+      @click="toggleMenu"
+      :disabled="isToggling"
+      class="p-2 text-gray-700 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
       aria-label="Menu"
     >
       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -120,6 +121,8 @@ const props = defineProps<{
 }>()
 
 const isOpen = ref(false)
+const isToggling = ref(false)
+const menuContainer = ref<HTMLElement | null>(null)
 const route = useRoute()
 
 const loginRedirectUrl = computed(() => {
@@ -127,6 +130,19 @@ const loginRedirectUrl = computed(() => {
   return `/login?redirect=${encodeURIComponent(redirectPath)}`
 })
 
+// Toggle menu with debounce to prevent accidental double-taps
+const toggleMenu = () => {
+  if (isToggling.value) return
+
+  isToggling.value = true
+  isOpen.value = !isOpen.value
+
+  // Re-enable after 500ms
+  setTimeout(() => {
+    isToggling.value = false
+  }, 500)
+}
+
 const handleLogout = async () => {
   isOpen.value = false
   await $fetch('/api/auth/logout', { method: 'POST' })
@@ -135,17 +151,21 @@ const handleLogout = async () => {
 
 // Close menu when clicking outside
 const handleClickOutside = (event: MouseEvent) => {
+  if (!isOpen.value || !menuContainer.value) return
+
   const target = event.target as HTMLElement
-  if (isOpen.value && !target.closest('.relative')) {
+  // Check if click is outside the menu container
+  if (!menuContainer.value.contains(target)) {
     isOpen.value = false
   }
 }
 
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
+  // Use capture phase to ensure we catch the event before other handlers
+  document.addEventListener('click', handleClickOutside, true)
 })
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('click', handleClickOutside, true)
 })
 </script>
diff --git a/pages/[slug].vue b/pages/[slug].vue
index 2870945..ffcc24c 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -2,90 +2,35 @@
   <div class="min-h-screen bg-gray-50 flex flex-col">
     <header class="bg-white shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <!-- Mobile Layout -->
-        <div class="md:hidden">
-          <div class="flex items-center justify-between mb-3">
-            <NuxtLink to="/" class="hover:opacity-80">
-              <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
-            </NuxtLink>
-            <div class="flex items-center gap-2">
-              <QRCodeButton v-if="sermon" :sermon="sermon" />
-              <ClientOnly fallback-tag="div">
-                <MobileMenu
-                  :is-authenticated="isAuthenticated"
-                  :is-admin="isAdmin"
-                  :show-home="true"
-                  :current-path="route.fullPath"
-                />
-              </ClientOnly>
-            </div>
-          </div>
-          <!-- Font Size Selector Below Buttons on Mobile -->
-          <div class="flex items-center justify-end gap-2">
-            <label for="font-size-mobile" class="text-xs font-medium text-gray-700 whitespace-nowrap">Size:</label>
-            <select
-              id="font-size-mobile"
-              v-model="fontSize"
-              class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
-            >
-              <option value="small">Small</option>
-              <option value="medium">Medium</option>
-              <option value="large">Large</option>
-            </select>
-          </div>
-        </div>
-
-        <!-- Desktop Layout -->
-        <div class="hidden md:flex items-center justify-between">
-          <NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80">
+        <div class="flex items-center justify-between mb-3">
+          <NuxtLink to="/" class="hover:opacity-80">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           </NuxtLink>
-          <div class="flex items-end gap-4">
-            <NuxtLink
-              to="/"
-              class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 whitespace-nowrap"
-            >
-              🏠 Home
-            </NuxtLink>
-            <div class="flex flex-col gap-1">
-              <label for="font-size" class="text-xs font-medium text-gray-700">Font Size:</label>
-              <select
-                id="font-size"
-                v-model="fontSize"
-                class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
-              >
-                <option value="small">Small</option>
-                <option value="medium">Medium</option>
-                <option value="large">Large</option>
-              </select>
-            </div>
+          <div class="flex items-center gap-2">
             <QRCodeButton v-if="sermon" :sermon="sermon" />
             <ClientOnly fallback-tag="div">
-              <template v-if="isAuthenticated">
-                <button
-                  @click="handleLogout"
-                  class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100 whitespace-nowrap"
-                >
-                  Log Out
-                </button>
-              </template>
-              <template v-else>
-                <NuxtLink
-                  :to="`/login?redirect=${encodeURIComponent(route.fullPath)}`"
-                  class="px-4 py-2 text-sm font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100 whitespace-nowrap"
-                >
-                  Log In
-                </NuxtLink>
-                <NuxtLink
-                  to="/register"
-                  class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100 whitespace-nowrap"
-                >
-                  Register
-                </NuxtLink>
-              </template>
+              <Menu
+                :is-authenticated="isAuthenticated"
+                :is-admin="isAdmin"
+                :show-home="true"
+                :current-path="route.fullPath"
+              />
             </ClientOnly>
           </div>
         </div>
+        <!-- Font Size Selector -->
+        <div class="flex items-center justify-end gap-2">
+          <label for="font-size" class="text-xs font-medium text-gray-700 whitespace-nowrap">Font Size:</label>
+          <select
+            id="font-size"
+            v-model="fontSize"
+            class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
+          >
+            <option value="small">Small</option>
+            <option value="medium">Medium</option>
+            <option value="large">Large</option>
+          </select>
+        </div>
       </div>
     </header>
 
diff --git a/pages/admin.vue b/pages/admin.vue
index 1f7aee0..c62e946 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -6,34 +6,14 @@
           <NuxtLink to="/">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
-
-          <!-- Mobile Menu -->
-          <div class="md:hidden">
-            <ClientOnly>
-              <MobileMenu
-                :is-authenticated="true"
-                :is-admin="true"
-                :show-home="true"
-                :current-path="route.fullPath"
-              />
-            </ClientOnly>
-          </div>
-
-          <!-- Desktop Navigation -->
-          <div class="hidden md:flex items-center gap-4">
-            <NuxtLink
-              to="/"
-              class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
-            >
-              Home
-            </NuxtLink>
-            <button
-              @click="handleLogout"
-              class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
-            >
-              Log Out
-            </button>
-          </div>
+          <ClientOnly>
+            <Menu
+              :is-authenticated="true"
+              :is-admin="true"
+              :show-home="true"
+              :current-path="route.fullPath"
+            />
+          </ClientOnly>
         </div>
         <h1 class="text-2xl font-bold text-gray-900">Manage Sermons</h1>
       </div>
diff --git a/pages/index.vue b/pages/index.vue
index f3fccd0..a4ae9fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,74 +3,15 @@
     <!-- Header -->
     <header class="bg-white shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <!-- Mobile Layout -->
-        <div class="md:hidden">
-          <div class="flex items-center justify-between mb-3">
-            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
-            <ClientOnly fallback-tag="div">
-              <MobileMenu
-                :is-authenticated="isAuthenticated"
-                :is-admin="isAdmin"
-                :show-home="false"
-              />
-            </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>
-          <div class="flex items-center gap-4">
-            <ClientOnly fallback-tag="div">
-              <template v-if="isAuthenticated">
-                <NuxtLink 
-                  v-if="isAdmin"
-                  to="/admin" 
-                  class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm whitespace-nowrap"
-                >
-                  Manage Sermons
-                </NuxtLink>
-                <NuxtLink 
-                  v-if="isAdmin"
-                  to="/users" 
-                  class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium text-sm whitespace-nowrap"
-                >
-                  Manage Users
-                </NuxtLink>
-                <NuxtLink 
-                  to="/profile" 
-                  class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
-                >
-                  Edit Profile
-                </NuxtLink>
-                <button
-                  @click="handleLogout"
-                  class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
-                >
-                  Log Out
-                </button>
-              </template>
-              <template v-else>
-                <NuxtLink
-                  to="/login"
-                  class="px-4 py-2 text-sm font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100"
-                >
-                  Log In
-                </NuxtLink>
-                <NuxtLink
-                  to="/register"
-                  class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
-                >
-                  Register
-                </NuxtLink>
-              </template>
-              <template #fallback>
-                <div class="h-10"></div>
-              </template>
-            </ClientOnly>
-          </div>
+        <div class="flex items-center justify-between mb-3">
+          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
+          <ClientOnly fallback-tag="div">
+            <Menu
+              :is-authenticated="isAuthenticated"
+              :is-admin="isAdmin"
+              :show-home="false"
+            />
+          </ClientOnly>
         </div>
 
         <div class="text-center mt-6">
diff --git a/pages/profile.vue b/pages/profile.vue
index fdb6de0..446014c 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -7,34 +7,14 @@
           <NuxtLink to="/">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
-
-          <!-- Mobile Menu -->
-          <div class="md:hidden">
-            <ClientOnly>
-              <MobileMenu
-                :is-authenticated="true"
-                :is-admin="false"
-                :show-home="true"
-                :current-path="route.fullPath"
-              />
-            </ClientOnly>
-          </div>
-
-          <!-- Desktop Navigation -->
-          <div class="hidden md:flex items-center gap-2">
-            <NuxtLink
-              to="/"
-              class="px-3 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100 whitespace-nowrap"
-            >
-              Home
-            </NuxtLink>
-            <button
-              @click="handleLogout"
-              class="px-3 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100 whitespace-nowrap"
-            >
-              Log Out
-            </button>
-          </div>
+          <ClientOnly>
+            <Menu
+              :is-authenticated="true"
+              :is-admin="false"
+              :show-home="true"
+              :current-path="route.fullPath"
+            />
+          </ClientOnly>
         </div>
         <h1 class="text-2xl font-bold text-gray-900">Edit Profile</h1>
       </div>
diff --git a/pages/users.vue b/pages/users.vue
index e55ba53..919887f 100644
--- a/pages/users.vue
+++ b/pages/users.vue
@@ -7,34 +7,14 @@
           <NuxtLink to="/">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
-
-          <!-- Mobile Menu -->
-          <div class="md:hidden">
-            <ClientOnly>
-              <MobileMenu
-                :is-authenticated="true"
-                :is-admin="true"
-                :show-home="true"
-                :current-path="route.fullPath"
-              />
-            </ClientOnly>
-          </div>
-
-          <!-- Desktop Navigation -->
-          <div class="hidden md:flex items-center gap-4">
-            <NuxtLink
-              to="/"
-              class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
-            >
-              Home
-            </NuxtLink>
-            <button
-              @click="handleLogout"
-              class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
-            >
-              Log Out
-            </button>
-          </div>
+          <ClientOnly>
+            <Menu
+              :is-authenticated="true"
+              :is-admin="true"
+              :show-home="true"
+              :current-path="route.fullPath"
+            />
+          </ClientOnly>
         </div>
         <h1 class="text-2xl font-bold text-gray-900">Manage Users</h1>
       </div>