forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
e341d6b5f3
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply transition-all duration-75 ease-in-out;
|
@apply fixed inset-0 overflow-hidden h-full z-50;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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",
|
||||||
|
@ -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"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user