forked from crowetic/commerce
Changes
This commit is contained in:
parent
dd08b0946b
commit
7d4b11d204
@ -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 {
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user