24 lines
635 B
JavaScript
24 lines
635 B
JavaScript
export const HeaderWrapper = ({ show, children }) => (
|
|
<header
|
|
className={`
|
|
fixed bottom-0 md:bottom-auto md:top-0 left-0
|
|
bg-neutral
|
|
w-full
|
|
z-30
|
|
transition-transform
|
|
duration-300 ease-in-out
|
|
${show ? '' : 'translate-y-36 md:-translate-y-36'}
|
|
drop-shadow-xl
|
|
`}
|
|
>
|
|
{' '}
|
|
{children}
|
|
</header>
|
|
)
|
|
|
|
// can't use string interpolation or tailwind won't account for these classes
|
|
const shownHeaderClasses = {
|
|
'bottom-16': 'group-[.header-shown]/layout:bottom-16',
|
|
'md:top-24': 'group-[.header-shown]/layout:md:top-24',
|
|
}
|
|
export const shownHeaderSelector = (cls) => shownHeaderClasses[cls]
|