forked from crowetic/commerce
Merge branch 'master' into arzafran/homepage-tweaks
This commit is contained in:
commit
c2d9b15e74
@ -1,9 +1,9 @@
|
|||||||
.dropdownMenu {
|
.dropdownMenu {
|
||||||
@apply fixed top-0 right-0 z-20 w-full h-full;
|
@apply fixed pt-6 right-0 z-20 w-full h-full;
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
@apply absolute right-0 w-screen;
|
@apply absolute right-0 w-screen;
|
||||||
max-width: 200px;
|
max-width: 185px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .dropdownMenuContainer {
|
& .dropdownMenuContainer {
|
||||||
@ -15,12 +15,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& .link {
|
& .link {
|
||||||
@apply flex space-x-2 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 items-center;
|
@apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
|
||||||
& .icons svg {
|
|
||||||
@apply w-6 h-6;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.off {
|
&.off {
|
||||||
|
@ -1,74 +1,60 @@
|
|||||||
import { useTheme } from 'next-themes'
|
|
||||||
import s from './DropdownMenu.module.css'
|
|
||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import { FocusScope } from '@react-aria/focus'
|
|
||||||
import {
|
|
||||||
useOverlay,
|
|
||||||
DismissButton,
|
|
||||||
usePreventScroll,
|
|
||||||
} from '@react-aria/overlays'
|
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
import { useTheme } from 'next-themes'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
|
import s from './DropdownMenu.module.css'
|
||||||
import { Moon, Sun } from '@components/icon'
|
import { Moon, Sun } from '@components/icon'
|
||||||
|
import { Menu } from '@headlessui/react'
|
||||||
interface DropdownMenuProps {
|
interface DropdownMenuProps {
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
innerRef: React.MutableRefObject<HTMLInputElement>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const DropdownMenu: FC<DropdownMenuProps> = ({
|
const DropdownMenu: FC<DropdownMenuProps> = ({
|
||||||
onClose,
|
onClose,
|
||||||
children,
|
children,
|
||||||
innerRef,
|
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
const { theme, setTheme } = useTheme()
|
const { theme, setTheme } = useTheme()
|
||||||
|
|
||||||
let { overlayProps } = useOverlay(
|
|
||||||
{
|
|
||||||
isDismissable: true,
|
|
||||||
onClose: onClose,
|
|
||||||
isOpen: true,
|
|
||||||
},
|
|
||||||
innerRef
|
|
||||||
)
|
|
||||||
|
|
||||||
usePreventScroll()
|
|
||||||
return (
|
return (
|
||||||
<FocusScope restoreFocus>
|
<nav className={cn(s.dropdownMenu)}>
|
||||||
<div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
|
<Menu.Items className={s.dropdownMenuContainer}>
|
||||||
{/* Needed placeholder for User Interation*/}
|
<Menu.Item>
|
||||||
<div className="flex justify-end">
|
{({ active }) => <a className={s.link}>My Purchases</a>}
|
||||||
<span onClick={onClose} className="bg-transparent h-12 w-12" />
|
</Menu.Item>
|
||||||
</div>
|
<Menu.Item>
|
||||||
|
{({ active }) => <a className={s.link}>My Account</a>}
|
||||||
<nav className={s.dropdownMenuContainer}>
|
</Menu.Item>
|
||||||
<Link href="#">
|
<Menu.Item>
|
||||||
<a className={s.link}>My Purchases</a>
|
{({ active }) => (
|
||||||
</Link>
|
<a
|
||||||
<Link href="#">
|
className={cn(s.link, 'justify-between')}
|
||||||
<a className={s.link}>My Account</a>
|
onClick={() =>
|
||||||
</Link>
|
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
||||||
<a
|
}
|
||||||
className={s.link}
|
>
|
||||||
onClick={() =>
|
<div>
|
||||||
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
Theme: <strong>{theme}</strong>{' '}
|
||||||
}
|
</div>
|
||||||
>
|
<div className="ml-3">
|
||||||
<span>
|
{theme == 'dark' ? (
|
||||||
Theme: <strong>{theme}</strong>{' '}
|
<Moon width={20} height={20} />
|
||||||
</span>
|
) : (
|
||||||
<span className={s.icons}>
|
<Sun width="20" height={20} />
|
||||||
{theme === 'dark' ? <Moon /> : <Sun />}
|
)}
|
||||||
</span>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<Link href="#">
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item>
|
||||||
|
{({ active }) => (
|
||||||
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
|
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
|
||||||
Logout
|
Logout
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
)}
|
||||||
</nav>
|
</Menu.Item>
|
||||||
</div>
|
</Menu.Items>
|
||||||
</FocusScope>
|
</nav>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
|
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply text-accents-8 transition ease-in-out duration-100 transform scale-110;
|
@apply text-accents-8;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.heart:hover svg {
|
&.heart:hover svg {
|
||||||
|
@ -7,7 +7,7 @@ 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 useCart from '@lib/bigcommerce/cart/use-cart'
|
import useCart from '@lib/bigcommerce/cart/use-cart'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -52,18 +52,30 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
|||||||
<Heart />
|
<Heart />
|
||||||
</li>
|
</li>
|
||||||
</Link>
|
</Link>
|
||||||
<li
|
<li className={s.item}>
|
||||||
className={s.item}
|
<Menu>
|
||||||
onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
|
{({ open }) => (
|
||||||
>
|
<>
|
||||||
<Avatar />
|
<Menu.Button className="inline-flex justify-center">
|
||||||
|
<Avatar />
|
||||||
|
</Menu.Button>
|
||||||
|
<Transition
|
||||||
|
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>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{displayDropdown && (
|
|
||||||
<DropdownMenu onClose={closeDropdown} innerRef={ref} />
|
|
||||||
)}
|
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,7 @@ const Moon = ({ ...props }) => {
|
|||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
fill="none"
|
fill="none"
|
||||||
shape-rendering="geometricPrecision"
|
shape-rendering="geometricPrecision"
|
||||||
|
{...props}
|
||||||
>
|
>
|
||||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -10,6 +10,7 @@ const Sun = ({ ...props }) => {
|
|||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
fill="none"
|
fill="none"
|
||||||
shape-rendering="geometricPrecision"
|
shape-rendering="geometricPrecision"
|
||||||
|
{...props}
|
||||||
>
|
>
|
||||||
<circle cx="12" cy="12" r="5" />
|
<circle cx="12" cy="12" r="5" />
|
||||||
<path d="M12 1v2" />
|
<path d="M12 1v2" />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user