1
0
mirror of https://github.com/vercel/commerce.git synced 2025-07-28 04:31:22 +00:00
Files
.vscode
assets
components
auth
cart
common
icons
product
ui
Button
Container
Grid
Hero
Input
Link
LoadingDots
Logo
Marquee
Modal
Sidebar
Sidebar.module.css
Sidebar.tsx
index.ts
Skeleton
Text
README.md
context.tsx
index.ts
wishlist
config
framework
lib
pages
public
styles
.editorconfig
.gitignore
.prettierignore
.prettierrc
README.md
codegen.json
commerce.config.json
global.d.ts
license.md
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
yarn.lock
commerce/components/ui/Sidebar/Sidebar.tsx
2020-11-26 13:13:30 -03:00

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