193 lines
8.3 KiB
Plaintext
193 lines
8.3 KiB
Plaintext
---
|
|
import { getChurchName } from '../lib/bindings.js';
|
|
|
|
let churchName = 'Church';
|
|
try {
|
|
churchName = getChurchName();
|
|
} catch (e) {
|
|
console.error('Failed to get church name:', e);
|
|
}
|
|
---
|
|
|
|
<nav class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200/20 dark:border-gray-700/20" role="navigation" aria-label="main navigation">
|
|
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16 lg:h-20">
|
|
<!-- Logo/Brand -->
|
|
<div class="flex items-center">
|
|
<a href="/" class="flex items-center space-x-3 group">
|
|
<!-- Angel Wings Icon -->
|
|
<div class="relative">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-105">
|
|
<i data-lucide="sparkles" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div class="absolute -top-1 -right-1 w-4 h-4 bg-gold-500 rounded-full opacity-80 animate-ping"></div>
|
|
</div>
|
|
<div class="hidden sm:block">
|
|
<h1 class="text-xl lg:text-2xl font-bold text-divine-gradient">{churchName}</h1>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400 -mt-1">Three Angels' Message</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<div class="hidden lg:flex items-center space-x-0">
|
|
<a href="/" class="nav-link">
|
|
<i data-lucide="home" class="w-4 h-4"></i>
|
|
<span>Home</span>
|
|
</a>
|
|
|
|
<!-- Events Link -->
|
|
<a href="/events" class="nav-link">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
|
<span>Events</span>
|
|
</a>
|
|
|
|
<!-- Sermons Link -->
|
|
<a href="/sermons" class="nav-link">
|
|
<i data-lucide="book-open" class="w-4 h-4"></i>
|
|
<span>Sermons</span>
|
|
</a>
|
|
|
|
<!-- Bulletin Link with Dropdown -->
|
|
<div class="relative group">
|
|
<a href="/bulletin" class="nav-link">
|
|
<i data-lucide="newspaper" class="w-4 h-4"></i>
|
|
<span>Bulletin</span>
|
|
<i data-lucide="chevron-down" class="w-4 h-4 ml-1 group-hover:rotate-180 transition-transform"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="/bulletin" class="dropdown-item">
|
|
<i data-lucide="calendar-check" class="w-4 h-4 text-primary-600"></i>
|
|
<span>Current Bulletin</span>
|
|
</a>
|
|
<a href="/bulletin/archive" class="dropdown-item">
|
|
<i data-lucide="archive" class="w-4 h-4 text-primary-600"></i>
|
|
<span>Bulletin Archive</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Three Angels' Message -->
|
|
<div class="relative group">
|
|
<a href="/three-angels" class="nav-link">
|
|
<i data-lucide="users" class="w-4 h-4"></i>
|
|
<span>Three Angels</span>
|
|
<i data-lucide="chevron-down" class="w-4 h-4 ml-1 group-hover:rotate-180 transition-transform"></i>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="/three-angels" class="dropdown-item">
|
|
<i data-lucide="layers" class="w-4 h-4 text-primary-600"></i>
|
|
<span>Overview</span>
|
|
</a>
|
|
<a href="/three-angels/first" class="dropdown-item">
|
|
<span class="w-4 h-4 flex items-center justify-center text-xs font-bold bg-primary-100 text-primary-700 rounded">1</span>
|
|
<span>First Angel</span>
|
|
</a>
|
|
<a href="/three-angels/second" class="dropdown-item">
|
|
<span class="w-4 h-4 flex items-center justify-center text-xs font-bold bg-primary-100 text-primary-700 rounded">2</span>
|
|
<span>Second Angel</span>
|
|
</a>
|
|
<a href="/three-angels/third" class="dropdown-item">
|
|
<span class="w-4 h-4 flex items-center justify-center text-xs font-bold bg-primary-100 text-primary-700 rounded">3</span>
|
|
<span>Third Angel</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="/about" class="nav-link">
|
|
<i data-lucide="info" class="w-4 h-4"></i>
|
|
<span>About</span>
|
|
</a>
|
|
|
|
<a href="/contact" class="nav-link">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
<span>Contact</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- CTA Button & Mobile Menu -->
|
|
<div class="flex items-center space-x-2">
|
|
<!-- Donation Button -->
|
|
<a href="https://adventistgiving.org/donate/AN4MJG" target="_blank" rel="noopener" class="hidden sm:inline-flex items-center space-x-2 bg-gold-500 text-black px-4 py-2 rounded-xl font-medium shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
|
|
<i data-lucide="heart" class="w-4 h-4"></i>
|
|
<span>Donate</span>
|
|
</a>
|
|
|
|
<!-- Live Stream Button -->
|
|
<a href="/live" class="hidden sm:inline-flex items-center space-x-2 bg-sacred-gradient text-white px-4 py-2 rounded-xl font-medium shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
|
|
<i data-lucide="video" class="w-4 h-4"></i>
|
|
<span>Watch Live</span>
|
|
</a>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button id="mobile-menu-button" class="lg:hidden p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
|
|
<i data-lucide="menu" class="w-6 h-6"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="hidden lg:hidden absolute top-full left-0 right-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-b border-gray-200/20 dark:border-gray-700/20 shadow-xl">
|
|
<div class="px-4 py-6 space-y-3">
|
|
<a href="/" class="mobile-nav-link">
|
|
<i data-lucide="home" class="w-5 h-5"></i>
|
|
<span>Home</span>
|
|
</a>
|
|
<a href="/events" class="mobile-nav-link">
|
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
<span>Events</span>
|
|
</a>
|
|
<a href="/sermons" class="mobile-nav-link">
|
|
<i data-lucide="book-open" class="w-5 h-5"></i>
|
|
<span>Sermons</span>
|
|
</a>
|
|
<a href="/bulletin" class="mobile-nav-link">
|
|
<i data-lucide="newspaper" class="w-5 h-5"></i>
|
|
<span>Current Bulletin</span>
|
|
</a>
|
|
<a href="/bulletin/archive" class="mobile-nav-link">
|
|
<i data-lucide="archive" class="w-5 h-5"></i>
|
|
<span>Bulletin Archive</span>
|
|
</a>
|
|
<a href="/three-angels" class="mobile-nav-link">
|
|
<i data-lucide="users" class="w-5 h-5"></i>
|
|
<span>Three Angels' Message</span>
|
|
</a>
|
|
<a href="/about" class="mobile-nav-link">
|
|
<i data-lucide="info" class="w-5 h-5"></i>
|
|
<span>About</span>
|
|
</a>
|
|
<a href="/contact" class="mobile-nav-link">
|
|
<i data-lucide="mail" class="w-5 h-5"></i>
|
|
<span>Contact</span>
|
|
</a>
|
|
<a href="https://adventistgiving.org/donate/AN4MJG" target="_blank" rel="noopener" class="mobile-nav-link bg-gold-500 text-black">
|
|
<i data-lucide="heart" class="w-5 h-5"></i>
|
|
<span>Donate</span>
|
|
</a>
|
|
<a href="/live" class="mobile-nav-link bg-sacred-gradient text-white">
|
|
<i data-lucide="video" class="w-5 h-5"></i>
|
|
<span>Watch Live</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
.nav-link {
|
|
@apply flex items-center space-x-1 px-2 py-2 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 font-medium text-sm;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
@apply absolute top-full left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform translate-y-2 group-hover:translate-y-0 z-50;
|
|
}
|
|
|
|
.dropdown-item {
|
|
@apply flex items-center space-x-4 px-6 py-3 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors first:rounded-t-xl last:rounded-b-xl;
|
|
}
|
|
|
|
.mobile-nav-link {
|
|
@apply flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 font-medium;
|
|
}
|
|
</style> |