Launch

src/components/Header.jsx

@@ -4,25 +4,24 @@ 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:'/prayer-requests', label:'PRAYER REQUESTS' },
-  { to:'/calendar', label:'CALENDAR' },
-  { to:'/beliefs', label:'OUR BELIEFS' },
+  { 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(){
+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" 
+            <img
+              src="/assets/favicon.ico.gif"
+              alt="Annaville SDA Church Logo"
               className="w-20 h-20 rounded-lg"
             />
             <span>
@@ -32,60 +31,62 @@ export default function Header(){
         </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'}`}
+            <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'})}
+          <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)}
+        <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 bg-black/30" onClick={()=>setOpen(false)}>
-          <div className="absolute top-0 right-0 w-[80%] h-full bg-white shadow-level1 p-8" onClick={e=>e.stopPropagation()}>
-            <div className="flex justify-between items-center mb-12">
-              <span className="font-heading text-h2">Menu</span>
-              <button className="btn-ghost" onClick={()=>setOpen(false)} aria-label="Close menu">✕</button>
+        <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>
-            <ul className="space-y-6">
-              {navItems.map(item => (
-                <li key={item.to}>
-                  <NavLink 
-                    to={item.to} 
-                    onClick={()=>setOpen(false)} 
-                    className={({isActive})=>`block py-5 text-body ${isActive?'text-primary font-semibold':'text-ink hover:text-primary'}`}
+            <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' }) }}
                   >
-                    {item.label}
-                  </NavLink>
+                    Contact Us
+                  </Link>
                 </li>
-              ))}
-              <li>
-                <Link 
-                  to="/contact" 
-                  className="btn w-full" 
-                  onClick={()=>{setOpen(false); track(events.CTA_CLICK,{label:'contact'})}}
-                >
-                  Contact Us
-                </Link>
-              </li>
-            </ul>
+              </ul>
+            </nav>
           </div>
         </div>
       )}