mirror of
https://github.com/vercel/commerce.git
synced 2025-07-28 04:31:22 +00:00
.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
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
|