import { useState, useEffect, useRef } from 'react' import Head from 'next/head' import { Header, ns as headerNs } from 'site/components/header/index.mjs' import { Footer, ns as footerNs } from 'shared/components/footer/index.mjs' import { Search, ns as searchNs } from 'site/components/search.mjs' export const ns = [...new Set([...headerNs, ...footerNs, ...searchNs])] export const LayoutWrapper = ({ children = [], search, setSearch, noSearch = false, header = false, footer = true, slug, }) => { const ChosenHeader = header ? header : Header const prevScrollPos = useRef(0) const [showHeader, setShowHeader] = useState(true) useEffect(() => { if (typeof window !== 'undefined') { const handleScroll = () => { const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0 if (curScrollPos >= prevScrollPos.current) { if (curScrollPos > 20) setShowHeader(false) } else setShowHeader(true) prevScrollPos.current = curScrollPos } window.addEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll) } }, [prevScrollPos, setShowHeader]) return (
{children}
{!noSearch && search && ( <>
)} {footer &&
) }