forked from crowetic/commerce
Dismissable Dropdown
This commit is contained in:
parent
d541948596
commit
8a9ef9ceb0
25
components/core/UserNav/DropdownMenu.module.css
Normal file
25
components/core/UserNav/DropdownMenu.module.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.dropdownMenu {
|
||||||
|
@apply fixed top-0 right-0 z-20 w-full h-full;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
@apply absolute right-0 w-screen;
|
||||||
|
max-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .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 {
|
||||||
|
@apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.off {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
70
components/core/UserNav/DropdownMenu.tsx
Normal file
70
components/core/UserNav/DropdownMenu.tsx
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import { useTheme } from 'next-themes'
|
||||||
|
import s from './DropdownMenu.module.css'
|
||||||
|
import { FC } from 'react'
|
||||||
|
import { FocusScope } from '@react-aria/focus'
|
||||||
|
import {
|
||||||
|
useOverlay,
|
||||||
|
DismissButton,
|
||||||
|
usePreventScroll,
|
||||||
|
} from '@react-aria/overlays'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import cn from 'classnames'
|
||||||
|
|
||||||
|
interface DropdownMenuProps {
|
||||||
|
onClose: () => void
|
||||||
|
innerRef: React.MutableRefObject<HTMLInputElement>
|
||||||
|
}
|
||||||
|
|
||||||
|
const DropdownMenu: FC<DropdownMenuProps> = ({
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
innerRef,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const { theme, setTheme } = useTheme()
|
||||||
|
|
||||||
|
let { overlayProps } = useOverlay(
|
||||||
|
{
|
||||||
|
isDismissable: true,
|
||||||
|
onClose: onClose,
|
||||||
|
isOpen: true,
|
||||||
|
},
|
||||||
|
innerRef
|
||||||
|
)
|
||||||
|
|
||||||
|
usePreventScroll()
|
||||||
|
return (
|
||||||
|
<FocusScope restoreFocus>
|
||||||
|
<div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
|
||||||
|
{/* Needed placeholder for User Interation*/}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<span onClick={onClose} className="bg-transparent h-12 w-12" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className={s.dropdownMenuContainer}>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={s.link}>My Purchases</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={s.link}>My Account</a>
|
||||||
|
</Link>
|
||||||
|
<a
|
||||||
|
className={s.link}
|
||||||
|
onClick={() =>
|
||||||
|
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Theme: <strong>{theme}</strong>
|
||||||
|
</a>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</FocusScope>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DropdownMenu
|
@ -20,28 +20,3 @@
|
|||||||
@apply mr-0;
|
@apply mr-0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMenu {
|
|
||||||
@apply fixed top-0 right-0 z-20 w-full h-full;
|
|
||||||
|
|
||||||
@screen lg {
|
|
||||||
@apply absolute right-0 w-screen;
|
|
||||||
max-width: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .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 {
|
|
||||||
@apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.off {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -1,18 +1,13 @@
|
|||||||
import Link from 'next/link'
|
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, useState, useRef, useCallback } from 'react'
|
import { FC, useRef } from 'react'
|
||||||
import { useTheme } from 'next-themes'
|
|
||||||
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 { FocusScope } from '@react-aria/focus'
|
import DropdownMenu from './DropdownMenu'
|
||||||
|
|
||||||
import {
|
|
||||||
useOverlay,
|
|
||||||
DismissButton,
|
|
||||||
usePreventScroll,
|
|
||||||
} from '@react-aria/overlays'
|
|
||||||
import useCart from '@lib/bigcommerce/cart/use-cart'
|
import useCart from '@lib/bigcommerce/cart/use-cart'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -73,57 +68,4 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DropdownMenuProps {
|
|
||||||
onClose: () => void
|
|
||||||
innerRef: React.MutableRefObject<HTMLInputElement>
|
|
||||||
}
|
|
||||||
|
|
||||||
const DropdownMenu: FC<DropdownMenuProps> = ({
|
|
||||||
onClose,
|
|
||||||
children,
|
|
||||||
innerRef,
|
|
||||||
...props
|
|
||||||
}) => {
|
|
||||||
const { theme, setTheme } = useTheme()
|
|
||||||
|
|
||||||
let { overlayProps } = useOverlay(
|
|
||||||
{
|
|
||||||
isDismissable: true,
|
|
||||||
onClose: onClose,
|
|
||||||
isOpen: true,
|
|
||||||
},
|
|
||||||
innerRef
|
|
||||||
)
|
|
||||||
|
|
||||||
usePreventScroll()
|
|
||||||
return (
|
|
||||||
<FocusScope restoreFocus>
|
|
||||||
<div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
|
|
||||||
<span onClick={onClose} className="w-full bg-transparent block h-12" />
|
|
||||||
<nav className={s.dropdownMenuContainer}>
|
|
||||||
<Link href="#">
|
|
||||||
<a className={s.link}>My Purchases</a>
|
|
||||||
</Link>
|
|
||||||
<Link href="#">
|
|
||||||
<a className={s.link}>My Account</a>
|
|
||||||
</Link>
|
|
||||||
<a
|
|
||||||
className={s.link}
|
|
||||||
onClick={() =>
|
|
||||||
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Theme: <strong>{theme}</strong>
|
|
||||||
</a>
|
|
||||||
<Link href="#">
|
|
||||||
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
|
|
||||||
Logout
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</FocusScope>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default UserNav
|
export default UserNav
|
||||||
|
Loading…
x
Reference in New Issue
Block a user