4
0
forked from crowetic/commerce

Merge branch 'master' into arzafran/homepage-tweaks

This commit is contained in:
Franco Arza 2020-10-22 12:09:33 -03:00
commit c2d9b15e74
6 changed files with 67 additions and 71 deletions

View File

@ -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 {

View File

@ -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>
) )
} }

View File

@ -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 {

View File

@ -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>
) )
} }

View File

@ -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>

View File

@ -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" />