/* Grove & Stone — Site Navigation */
const { useState, useEffect } = React;
function SiteNav({ page, setPage }) {
const [scrolled, setScrolled] = useState(false);
const [menu, setMenu] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 56);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
// Close mobile menu whenever page changes
useEffect(() => { setMenu(false); }, [page]);
const links = [
{ id: 'home', label: 'Home' },
{ id: 'about', label: 'About' },
{ id: 'services', label: 'Services' },
{ id: 'portfolio', label: 'Portfolio' },
];
const solid = scrolled || menu;
return (
<>
{/* Mobile menu */}
{menu && (
{links.map(({ id, label }) => (
))}