forked from crowetic/commerce
Added dropdown
This commit is contained in:
parent
9d8db18c38
commit
1b80080762
@ -15,3 +15,12 @@
|
|||||||
@apply mr-0;
|
@apply mr-0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdownMenu {
|
||||||
|
@apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1;
|
||||||
|
max-width: 160px;
|
||||||
|
|
||||||
|
& .link {
|
||||||
|
@apply 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { FC } from 'react'
|
import { FC, useState } from 'react'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import useCart from '@lib/bigcommerce/cart/use-cart'
|
import useCart from '@lib/bigcommerce/cart/use-cart'
|
||||||
import { Avatar } from '@components/core'
|
import { Avatar } from '@components/core'
|
||||||
@ -17,6 +17,7 @@ const countItems = (count: number, items: any[]) =>
|
|||||||
|
|
||||||
const UserNav: FC<Props> = ({ className }) => {
|
const UserNav: FC<Props> = ({ className }) => {
|
||||||
const { data } = useCart()
|
const { data } = useCart()
|
||||||
|
const [displayDropdown, setDisplayDropdown] = useState(false)
|
||||||
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
const { openSidebar, closeSidebar, displaySidebar } = useUI()
|
||||||
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
||||||
|
|
||||||
@ -39,10 +40,33 @@ const UserNav: FC<Props> = ({ className }) => {
|
|||||||
<Heart />
|
<Heart />
|
||||||
</li>
|
</li>
|
||||||
</Link>
|
</Link>
|
||||||
<li className={s.item}>
|
<li
|
||||||
|
className={s.item}
|
||||||
|
onClick={() => {
|
||||||
|
setDisplayDropdown((i) => !i)
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Avatar />
|
<Avatar />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
{displayDropdown && (
|
||||||
|
<div className={s.dropdownMenu}>
|
||||||
|
<div className="shadow-lg overflow-hidden">
|
||||||
|
<nav className="relative grid bg-primary py-2">
|
||||||
|
<Link href="#">
|
||||||
|
<a className={s.link}>My Purchases</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={s.link}>My Account</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="#">
|
||||||
|
<a className={cn(s.link, 'mt-4')}>Logout</a>
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user