mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 07:26:59 +00:00
57 lines
1.6 KiB
TypeScript
57 lines
1.6 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 SidebarProps {
|
|
children: any
|
|
open: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const Sidebar: FC<SidebarProps> = ({ children, open = false, onClose }) => {
|
|
const ref = useRef() as React.MutableRefObject<HTMLDivElement>
|
|
|
|
// useEffect(() => {
|
|
// // setTimeout(() => {
|
|
// // if (ref.current && open) {
|
|
// // window.document.body.style.overflow = 'hidden'
|
|
// // disableBodyScroll(ref.current)
|
|
// // } else {
|
|
// // window.document.body.style.overflow &&
|
|
// // setTimeout(() => (window.document.body.style.overflow = 'unset'), 30)
|
|
// // !!ref.current && enableBodyScroll(ref.current)
|
|
// // }
|
|
// // }, 30)
|
|
// 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={s.sidebar}>{children}</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Portal>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|