crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/okbel/e-comm-example

Browse Source
This commit is contained in:
Luis Alvarez
2020-10-06 15:50:51 -05:00
parent 35c91bca2b b3d2802739
commit e341d6b5f3
5 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/ui/Sidebar/Sidebar.tsx
View File

@@ -1,28 +1,48 @@
import cn from 'classnames'
import { FC } from 'react'
import s from './Sidebar.module.css'
import { Transition } from '@headlessui/react'
interface Props {
className?: string
children?: any
show?: boolean
}
const Sidebar: FC<Props> = ({ className, children }) => {
const Sidebar: FC<Props> = ({ className, children, show = true }) => {
const rootClassName = cn(s.root, className)
return (
<div className={rootClassName}>
<div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25 z-50">
<Transition show={show}>
<div className={rootClassName}>
<div className="absolute inset-0 overflow-hidden">
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
<div className="w-screen max-w-2xl">
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
{children}
<Transition.Child
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="absolute inset-0 bg-black bg-opacity-25 transition-opacity" />
</Transition.Child>
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
enter="transition ease-in-out duration-300 transform"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="h-full w-screen max-w-2xl">
<div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
{children}
</div>
</div>
</div>
</Transition.Child>
</section>
</div>
</div>
</div>
</Transition>
)
}