4
0
forked from crowetic/commerce
This commit is contained in:
Belen Curcio 2020-10-22 12:53:49 -03:00
parent dd08b0946b
commit 7d4b11d204
4 changed files with 21 additions and 36 deletions

View File

@ -1,17 +1,8 @@
.dropdownMenu { .dropdownMenu {
@apply fixed pt-6 right-0 z-20 w-full h-full; @apply fixed right-0 mt-7 origin-top-right outline-none bg-primary z-40 w-full h-full;
@screen lg { @screen lg {
@apply absolute right-0 w-screen; @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
max-width: 185px;
}
& .dropdownMenuContainer {
@apply flex-col py-6 bg-primary h-full justify-around;
@screen lg {
@apply border border-accents-1 shadow-lg py-2 h-auto;
}
} }
& .link { & .link {

View File

@ -4,21 +4,32 @@ import { useTheme } from 'next-themes'
import cn from 'classnames' import cn from 'classnames'
import s from './DropdownMenu.module.css' import s from './DropdownMenu.module.css'
import { Moon, Sun } from '@components/icon' import { Moon, Sun } from '@components/icon'
import { Menu } from '@headlessui/react' import { Menu, Transition } from '@headlessui/react'
import { usePreventScroll } from '@react-aria/overlays'
interface DropdownMenuProps { interface DropdownMenuProps {
onClose: () => void onClose: () => void
open: boolean
} }
const DropdownMenu: FC<DropdownMenuProps> = ({ const DropdownMenu: FC<DropdownMenuProps> = ({
onClose, onClose,
children, children,
open = false,
...props ...props
}) => { }) => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
usePreventScroll()
return ( return (
<nav className={cn(s.dropdownMenu)}> <Transition
<Menu.Items className={s.dropdownMenuContainer}> show={open}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className={s.dropdownMenu}>
<Menu.Item> <Menu.Item>
{({ active }) => <a className={s.link}>My Purchases</a>} {({ active }) => <a className={s.link}>My Purchases</a>}
</Menu.Item> </Menu.Item>
@ -54,7 +65,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
)} )}
</Menu.Item> </Menu.Item>
</Menu.Items> </Menu.Items>
</nav> </Transition>
) )
} }

View File

@ -2,12 +2,11 @@ import Link from 'next/link'
import cn from 'classnames' import cn from 'classnames'
import s from './UserNav.module.css' import s from './UserNav.module.css'
import { FC, useRef } from 'react' import { FC, useRef } from 'react'
import { Avatar } from '@components/core' import { Avatar } from '@components/core'
import { Heart, Bag } from '@components/icon' import { Heart, Bag } from '@components/icon'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import DropdownMenu from './DropdownMenu' import DropdownMenu from './DropdownMenu'
import { Menu, Transition } from '@headlessui/react' import { Menu } from '@headlessui/react'
import useCart from '@lib/bigcommerce/cart/use-cart' import useCart from '@lib/bigcommerce/cart/use-cart'
interface Props { interface Props {
@ -59,17 +58,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
<Menu.Button className="inline-flex justify-center"> <Menu.Button className="inline-flex justify-center">
<Avatar /> <Avatar />
</Menu.Button> </Menu.Button>
<Transition <DropdownMenu onClose={closeDropdown} open={open} />
show={open}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<DropdownMenu onClose={closeDropdown} />
</Transition>
</> </>
)} )}
</Menu> </Menu>

View File

@ -2,13 +2,7 @@ import cn from 'classnames'
import { FC, useRef } from 'react' import { FC, useRef } from 'react'
import s from './Modal.module.css' import s from './Modal.module.css'
import { useDialog } from '@react-aria/dialog' import { useDialog } from '@react-aria/dialog'
import { import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays'
useOverlay,
usePreventScroll,
useModal,
OverlayProvider,
OverlayContainer,
} from '@react-aria/overlays'
import { FocusScope } from '@react-aria/focus' import { FocusScope } from '@react-aria/focus'
interface Props { interface Props {