cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests 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
commit e341d6b5f3
5 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/core/Layout/Layout.tsx
View File

@ -28,11 +28,9 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
<main className={s.main}>{children}</main>
</Container>
<Footer />
{displaySidebar && (
<Sidebar>
<CartSidebarView />
</Sidebar>
)}
<Sidebar show={displaySidebar}>
<CartSidebarView />
</Sidebar>
</div>
)
}

2
components/ui/Sidebar/Sidebar.module.css
View File

@ -1,3 +1,3 @@
.root {
@apply transition-all duration-75 ease-in-out;
@apply fixed inset-0 overflow-hidden h-full z-50;
}

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>
)
}

1
package.json
View File

@ -18,6 +18,7 @@
"singleQuote": true
},
"dependencies": {
"@headlessui/react": "^0.2.0",
"@tailwindcss/ui": "^0.6.2",
"@types/classnames": "^2.2.10",
"classnames": "^2.2.6",

5
yarn.lock
View File

@ -1390,6 +1390,11 @@
is-promise "4.0.0"
tslib "~2.0.1"
"@headlessui/react@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-0.2.0.tgz#a31f90892d736243ba91c1474f534b3256d0c538"
integrity sha512-YV+vF+QhTRcspydPdHF3ZXe+FkOiJpRdqMjjFIIX9bSdT2O2T7GurgKQdGgamNUM+B99MZBOTRqxS8Dlh485eg==
"@next/env@9.5.4-canary.23":
version "9.5.4-canary.23"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4-canary.23.tgz#2078ce80a1d9424bab7ec169dcf98b8d684bc845"