From 1cb0a4e9a2507d8b26b53cf65d1b99c93e90afd5 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Thu, 6 Nov 2025 09:29:34 -0500
Subject: [PATCH] feat: Add consistent mobile hamburger menu across all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated profile.vue to use MobileMenu on mobile, desktop buttons on desktop
- Updated admin.vue to use MobileMenu on mobile, desktop buttons on desktop
- Updated users.vue to use MobileMenu on mobile, desktop buttons on desktop
- All pages with header navigation now have consistent mobile UX
- Mobile menu provides clean, organized navigation with all options
- Desktop retains traditional button layout for familiarity

This ensures consistent navigation experience across the entire application,
with the hamburger menu appearing on all pages with headers when viewed
on mobile devices.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 pages/admin.vue   | 20 ++++++++++++++++++--
 pages/profile.vue | 20 ++++++++++++++++++--
 pages/users.vue   | 20 ++++++++++++++++++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/pages/admin.vue b/pages/admin.vue
index e7b8712..1f7aee0 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -6,8 +6,22 @@
           <NuxtLink to="/">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
-          <div class="flex items-center gap-4">
-            <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"
             >
@@ -417,6 +431,8 @@ definePageMeta({
   middleware: 'auth'
 })
 
+const route = useRoute()
+
 // Fetch all sermons for management (including archived)
 const { data: allSermons, refresh: refreshSermons } = await useFetch('/api/sermons?includeArchived=true')
 
diff --git a/pages/profile.vue b/pages/profile.vue
index bc60f6f..fdb6de0 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -7,8 +7,22 @@
           <NuxtLink to="/">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
-          <div class="flex items-center gap-2">
-            <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"
             >
@@ -254,6 +268,8 @@ definePageMeta({
   middleware: 'auth'
 })
 
+const route = useRoute()
+
 const profile = ref({
   username: '',
   firstName: '',
diff --git a/pages/users.vue b/pages/users.vue
index a05b46c..e55ba53 100644
--- a/pages/users.vue
+++ b/pages/users.vue
@@ -7,8 +7,22 @@
           <NuxtLink to="/">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
-          <div class="flex items-center gap-4">
-            <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"
             >
@@ -219,6 +233,8 @@ definePageMeta({
   middleware: 'auth'
 })
 
+const route = useRoute()
+
 interface User {
   id: number
   username: string