forked from crowetic/commerce
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import s from './Sidebar.module.css'
|
|
import Portal from '@reach/portal'
|
|
import { FC, useEffect, useRef } from 'react'
|
|
import {
|
|
disableBodyScroll,
|
|
enableBodyScroll,
|
|
clearAllBodyScrollLocks,
|
|
} from 'body-scroll-lock'
|
|
|
|
interface Props {
|
|
children: any
|
|
open: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
|
|
const ref = useRef() as React.MutableRefObject<HTMLDivElement>
|
|
|
|
useEffect(() => {
|
|
if (ref.current) {
|
|
if (open) {
|
|
disableBodyScroll(ref.current)
|
|
} else {
|
|
enableBodyScroll(ref.current)
|
|
}
|
|
}
|
|
return () => {
|
|
clearAllBodyScrollLocks()
|
|
}
|
|
}, [open])
|
|
|
|
return (
|
|
<Portal>
|
|
{open ? (
|
|
<div className={s.root} ref={ref}>
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
|
|
<div className="h-full md:w-screen md:max-w-md">
|
|
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</Portal>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|