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/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>