96 lines
3.8 KiB
JavaScript
96 lines
3.8 KiB
JavaScript
|
|
import React, { useState } from 'react'
|
|
import { Link, NavLink } from 'react-router-dom'
|
|
import { track, events } from '../utils/analytics'
|
|
|
|
const navItems = [
|
|
{ to: '/about', label: 'ABOUT US' },
|
|
{ to: '/services', label: 'SERVICES' },
|
|
{ to: '/resources', label: 'RESOURCES' },
|
|
{ to: '/events', label: 'EVENTS' },
|
|
{ to: '/calendar', label: 'CALENDAR' },
|
|
{ to: '/beliefs', label: 'OUR BELIEFS' },
|
|
]
|
|
|
|
export default function Header() {
|
|
const [open, setOpen] = useState(false)
|
|
return (
|
|
<header role="banner" className="z-50 bg-white/90 backdrop-blur border-b border-subtle">
|
|
<nav id="navigation" aria-label="Main navigation" className="container flex items-center justify-between h-20">
|
|
<div className="flex items-center gap-4">
|
|
<Link to="/" className="flex items-center gap-4 font-heading text-lg font-semibold tracking-tight text-ink leading-tight">
|
|
<img
|
|
src="/assets/favicon.ico.gif"
|
|
alt="Annaville SDA Church Logo"
|
|
className="w-20 h-20 rounded-lg"
|
|
/>
|
|
<span>
|
|
Annaville Seventh-day<br />Adventist Church
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
<div className="hidden md:flex items-center gap-6">
|
|
{navItems.map(item => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={({ isActive }) => `text-sm font-medium transition-colors ${isActive ? 'text-primary font-semibold' : 'text-ink hover:text-primary'}`}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
<Link
|
|
to="/contact"
|
|
className="btn text-sm px-4 py-2"
|
|
onClick={() => track(events.CTA_CLICK, { label: 'contact' })}
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</div>
|
|
<button
|
|
aria-label="Open menu"
|
|
className="md:hidden btn-ghost"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<span aria-hidden className="text-3xl">☰</span>
|
|
</button>
|
|
</nav>
|
|
|
|
{open && (
|
|
<div role="dialog" aria-modal="true" className="md:hidden fixed inset-0 z-[100] bg-white" onClick={() => setOpen(false)}>
|
|
<div className="h-full w-full bg-white flex flex-col" onClick={e => e.stopPropagation()}>
|
|
<div className="bg-white border-b border-gray-200 p-4 flex justify-between items-center flex-shrink-0">
|
|
<span className="font-heading text-2xl font-bold text-gray-900">Menu</span>
|
|
<button className="text-3xl text-gray-700 leading-none p-2 hover:bg-gray-100 rounded-lg transition-colors" onClick={() => setOpen(false)} aria-label="Close menu">✕</button>
|
|
</div>
|
|
<nav className="flex-1 flex flex-col justify-center px-8 py-8 bg-white">
|
|
<ul className="space-y-4">
|
|
{navItems.map(item => (
|
|
<li key={item.to}>
|
|
<NavLink
|
|
to={item.to}
|
|
onClick={() => setOpen(false)}
|
|
className={({ isActive }) => `block py-3 font-semibold text-lg text-center transition-colors ${isActive ? 'text-primary' : 'text-gray-900 hover:text-primary'}`}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
<li className="pt-4 border-t border-gray-200">
|
|
<Link
|
|
to="/contact"
|
|
className="block py-3 font-semibold text-lg text-center text-gray-900 hover:text-primary transition-colors"
|
|
onClick={() => { setOpen(false); track(events.CTA_CLICK, { label: 'contact' }) }}
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|