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> <main className={s.main}>{children}</main>
</Container> </Container>
<Footer /> <Footer />
{displaySidebar && ( <Sidebar show={displaySidebar}>
<Sidebar> <CartSidebarView />
<CartSidebarView /> </Sidebar>
</Sidebar>
)}
</div> </div>
) )
} }

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

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

1
package.json
View File

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

5
yarn.lock
View File

@ -1390,6 +1390,11 @@
is-promise "4.0.0" is-promise "4.0.0"
tslib "~2.0.1" 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": "@next/env@9.5.4-canary.23":
version "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" resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4-canary.23.tgz#2078ce80a1d9424bab7ec169dcf98b8d684bc845"