Archived
Austin
5c81b65e51
- New sage/cream palette and stacked logo lockup (The Vine over Coffeehouse + Bakery) driven by currentColor; logo SVGs now colorable - Reuse the logo component for the hero and section marks - Rewrite site copy: real founding (Morissa Bennett, 2024), real story from the product range, remove invented claims and AI phrasing - Contact form now sends over SMTP via /api/contact (nodemailer) with real send/error states, server-side validation, and reply-to the customer; delivers to CONTACT_TO. Add .env.example and a test-email script - Fix mobile: unmount the off-screen menu (killed sideways scroll), cap logo width, responsive heroes and type - Remove Firebase (config, tracked build output, placeholder pages, nix firebase-tools) now that hosting has moved - Delete dead code: LoyaltyCardForm, ProductModal, LoadingSpinner, card-flip CSS, unused Playfair font - Serve dev/start on port 2024
107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
'use client'
|
|
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import Logo from './Logo';
|
|
|
|
const Header = () => {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
const navItems = [
|
|
{ label: 'Our Products', href: '/products' },
|
|
{ label: 'Our Story', href: '/history' },
|
|
{ label: 'Contact', href: '/contact' },
|
|
];
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 bg-bakery-50/90 backdrop-blur border-b border-bakery-200">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between gap-2 h-20 md:h-24">
|
|
{/* Logo */}
|
|
<Logo className="text-bakery-700" />
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center gap-8">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-sm uppercase tracking-[0.15em] text-bakery-700 hover:text-bakery-900 transition"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
className="md:hidden p-2 shrink-0"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
aria-label="Toggle menu"
|
|
aria-expanded={isMobileMenuOpen}
|
|
>
|
|
<svg
|
|
className="h-6 w-6 text-bakery-700"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Navigation — must UNMOUNT when closed. A panel parked off-screen
|
|
at translate-x-full still extends the scrollable area, which is what let
|
|
you scroll sideways and find the menu. */}
|
|
<AnimatePresence>
|
|
{isMobileMenuOpen && (
|
|
<motion.div
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '100%' }}
|
|
transition={{ type: 'tween', duration: 0.25, ease: 'easeOut' }}
|
|
className="md:hidden fixed inset-0 bg-bakery-50 z-50"
|
|
>
|
|
<div className="p-4">
|
|
<div className="flex justify-between items-center gap-2 mb-8 h-16">
|
|
<Logo className="text-bakery-800" />
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
className="p-2 shrink-0"
|
|
aria-label="Close menu"
|
|
>
|
|
<svg
|
|
className="h-6 w-6 text-bakery-700"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<nav className="flex flex-col">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-bakery-800 hover:text-bakery-600 transition py-4 text-lg"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|