2023-07-26 17:04:17 -06:00
|
|
|
import { useState, useEffect, useRef } from 'react'
|
2023-03-26 16:50:46 +02:00
|
|
|
import Head from 'next/head'
|
2023-03-27 18:49:09 +02:00
|
|
|
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])]
|
2022-05-25 18:35:20 +02:00
|
|
|
|
2023-05-08 19:28:03 +02:00
|
|
|
export const LayoutWrapper = ({
|
|
|
|
|
children = [],
|
|
|
|
|
search,
|
|
|
|
|
setSearch,
|
|
|
|
|
noSearch = false,
|
|
|
|
|
header = false,
|
2023-07-15 16:55:22 +02:00
|
|
|
footer = true,
|
2023-07-16 08:25:08 +02:00
|
|
|
slug,
|
2023-05-08 19:28:03 +02:00
|
|
|
}) => {
|
|
|
|
|
const ChosenHeader = header ? header : Header
|
2023-07-26 17:04:17 -06:00
|
|
|
const prevScrollPos = useRef(0)
|
2023-06-20 16:52:00 -05:00
|
|
|
const [showHeader, setShowHeader] = useState(true)
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
|
const handleScroll = () => {
|
|
|
|
|
const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0
|
2023-07-26 17:04:17 -06:00
|
|
|
|
|
|
|
|
if (curScrollPos >= prevScrollPos.current) {
|
|
|
|
|
if (curScrollPos > 20) setShowHeader(false)
|
2023-06-20 16:52:00 -05:00
|
|
|
} else setShowHeader(true)
|
2023-07-26 17:04:17 -06:00
|
|
|
|
|
|
|
|
prevScrollPos.current = curScrollPos
|
2023-06-20 16:52:00 -05:00
|
|
|
}
|
2023-07-26 17:04:17 -06:00
|
|
|
|
2023-06-20 16:52:00 -05:00
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
|
|
|
}
|
2023-07-26 17:04:17 -06:00
|
|
|
}, [prevScrollPos, setShowHeader])
|
2023-06-20 16:52:00 -05:00
|
|
|
|
2022-05-25 18:35:20 +02:00
|
|
|
return (
|
2022-12-03 11:25:02 -06:00
|
|
|
<div
|
|
|
|
|
className={`
|
2022-05-25 18:35:20 +02:00
|
|
|
flex flex-col justify-between
|
|
|
|
|
min-h-screen
|
|
|
|
|
bg-base-100
|
2023-06-22 14:02:57 -05:00
|
|
|
group/layout
|
|
|
|
|
header-${showHeader ? 'shown' : 'hidden'}
|
2022-12-03 11:25:02 -06:00
|
|
|
`}
|
|
|
|
|
>
|
2023-03-26 16:50:46 +02:00
|
|
|
<Head>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
</Head>
|
2023-07-16 08:25:08 +02:00
|
|
|
<ChosenHeader show={showHeader} slug={slug} />
|
2023-06-20 16:52:00 -05:00
|
|
|
|
|
|
|
|
<main
|
2023-07-26 08:47:28 +02:00
|
|
|
className={`grow transition-margin duration-300 ease-in-out md:group-[.header-shown]/layout:mt-20 lg:mt-4
|
2023-06-20 16:52:00 -05:00
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{children}
|
|
|
|
|
</main>
|
|
|
|
|
|
2022-05-25 18:35:20 +02:00
|
|
|
{!noSearch && search && (
|
|
|
|
|
<>
|
2022-12-03 11:25:02 -06:00
|
|
|
<div
|
|
|
|
|
className={`
|
2023-06-20 16:52:00 -05:00
|
|
|
w-full max-h-screen bg-base-100 top-0 z-30 pt-0 pb-16 px-8
|
|
|
|
|
md:rounded-lg
|
2022-05-25 18:35:20 +02:00
|
|
|
md:max-w-xl md:m-auto md:inset-x-12
|
|
|
|
|
md:max-w-2xl
|
|
|
|
|
lg:max-w-4xl
|
2022-12-03 11:25:02 -06:00
|
|
|
`}
|
|
|
|
|
>
|
2023-05-08 19:28:03 +02:00
|
|
|
<Search search={search} setSearch={setSearch} />
|
2022-12-03 11:25:02 -06:00
|
|
|
</div>
|
|
|
|
|
<div className="fixed top-0 left-0 w-full min-h-screen bg-neutral z-20 bg-opacity-70"></div>
|
2022-05-25 18:35:20 +02:00
|
|
|
</>
|
|
|
|
|
)}
|
2023-07-15 16:55:22 +02:00
|
|
|
{footer && <Footer />}
|
2022-05-25 18:35:20 +02:00
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
