feat: Add mobile hamburger menu and Register button

Implemented comprehensive navigation improvements to make registration
more discoverable and provide a cleaner mobile experience.

## Mobile Improvements
- Created reusable MobileMenu component with hamburger icon
- Replaces cluttered button layout with clean dropdown menu
- Includes Home, Profile, Admin links, and authentication options
- Auto-closes when clicking outside or navigating
- Smooth transition animations

## Register Button Added
- Sermon page: Added Register button next to Login in notes section
- Sermon page: Added Register button in header for non-authenticated users
- Home page: Added Register button next to Login for easy discovery
- All Register links redirect to login page in register mode

## Navigation Consistency
- Home button now visible on sermon pages (desktop and mobile)
- Consistent navigation experience across all pages
- Mobile menu available on both home and sermon pages
- Better mobile UX with less header crowding

Benefits:
- Users can easily find how to register
- Cleaner mobile interface
- Consistent navigation patterns
- Better discoverability of account features

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

Co-Authored-By: Claude <noreply@anthropic.com>

pages/[slug].vue

@@ -11,20 +11,12 @@
             <div class="flex items-center gap-2">
               <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-red-700 bg-red-50 rounded-md hover:bg-red-100 whitespace-nowrap"
-                >
-                  Log Out
-                </button>
-                <NuxtLink 
-                  v-else
-                  :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>
+                <MobileMenu
+                  :is-authenticated="isAuthenticated"
+                  :is-admin="isAdmin"
+                  :show-home="true"
+                  :current-path="route.fullPath"
+                />
               </ClientOnly>
             </div>
           </div>
@@ -49,6 +41,12 @@
             <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
@@ -63,20 +61,28 @@
             </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-red-700 bg-red-50 rounded-md hover:bg-red-100 whitespace-nowrap"
-              >
-                Log Out
-              </button>
-              <NuxtLink 
-                v-else
-                :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>
+              <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>
             </ClientOnly>
           </div>
         </div>
@@ -208,12 +214,20 @@
               </svg>
               <h3 class="text-lg font-medium text-gray-900 mb-2">Want to take notes?</h3>
               <p class="text-gray-600 mb-4">Log in or create an account to save your sermon notes!</p>
-              <NuxtLink 
-                :to="`/login?redirect=${encodeURIComponent(route.fullPath)}`"
-                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
-              >
-                Log In
-              </NuxtLink>
+              <div class="flex gap-3 justify-center">
+                <NuxtLink
+                  :to="`/login?redirect=${encodeURIComponent(route.fullPath)}`"
+                  class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"
+                >
+                  Log In
+                </NuxtLink>
+                <NuxtLink
+                  to="/register"
+                  class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
+                >
+                  Register
+                </NuxtLink>
+              </div>
             </div>
           </ClientOnly>
         </section>

pages/index.vue

@@ -8,47 +8,13 @@
           <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">
-              <template v-if="isAuthenticated">
-                <div class="flex items-center gap-2">
-                  <NuxtLink 
-                    to="/profile" 
-                    class="px-3 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100 whitespace-nowrap"
-                  >
-                    Edit Profile
-                  </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>
-              </template>
-              <NuxtLink 
-                v-else
-                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>
+              <MobileMenu
+                :is-authenticated="isAuthenticated"
+                :is-admin="isAdmin"
+                :show-home="false"
+              />
             </ClientOnly>
           </div>
-          <ClientOnly fallback-tag="div">
-            <div v-if="isAuthenticated && isAdmin" class="flex items-center justify-center gap-2">
-              <NuxtLink 
-                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 
-                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>
-            </div>
-          </ClientOnly>
         </div>
 
         <!-- Desktop Layout -->
@@ -86,13 +52,20 @@
                   Log Out
                 </button>
               </template>
-              <NuxtLink 
-                v-else
-                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>
+              <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>

pages/register.vue

@@ -0,0 +1,12 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+// Redirect to login page in register mode
+definePageMeta({
+  middleware: () => {
+    return navigateTo('/login?mode=register')
+  }
+})
+</script>