forked from crowetic/commerce
Adds some extra logic for handling sidebar
This commit is contained in:
parent
2c1f366f59
commit
2ae113ed66
@ -4,6 +4,7 @@ import { useTheme } from 'next-themes'
|
||||
import cn from 'classnames'
|
||||
import s from './DropdownMenu.module.css'
|
||||
import { Moon, Sun } from '@components/icons'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import { Menu, Transition } from '@headlessui/react'
|
||||
import useLogout from '@bigcommerce/storefront-data-hooks/dist/use-logout'
|
||||
import { useRouter } from 'next/router'
|
||||
@ -32,6 +33,8 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
|
||||
const logout = useLogout()
|
||||
const { pathname } = useRouter()
|
||||
|
||||
const { closeSidebarIfPresent } = useUI()
|
||||
|
||||
return (
|
||||
<Transition
|
||||
show={open}
|
||||
@ -51,6 +54,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
|
||||
className={cn(s.link, {
|
||||
[s.active]: pathname === href,
|
||||
})}
|
||||
onClick={closeSidebarIfPresent}
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
@ -21,21 +21,18 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
||||
const { data } = useCart()
|
||||
const { data: customer } = useCustomer()
|
||||
|
||||
const { openSidebar, closeSidebar, displaySidebar, openModal } = useUI()
|
||||
const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
|
||||
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
|
||||
return (
|
||||
<nav className={cn(s.root, className)}>
|
||||
<div className={s.mainContainer}>
|
||||
<ul className={s.list}>
|
||||
<li
|
||||
className={s.item}
|
||||
onClick={(e) => (displaySidebar ? closeSidebar() : openSidebar())}
|
||||
>
|
||||
<li className={s.item} onClick={toggleSidebar}>
|
||||
<Bag />
|
||||
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
|
||||
</li>
|
||||
<Link href="/wishlist">
|
||||
<li className={s.item}>
|
||||
<li className={s.item} onClick={closeSidebarIfPresent}>
|
||||
<Heart />
|
||||
</li>
|
||||
</Link>
|
||||
|
@ -131,6 +131,12 @@ export const UIProvider: FC = (props) => {
|
||||
|
||||
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
|
||||
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||
const toggleSidebar = () =>
|
||||
state.displaySidebar
|
||||
? dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||
: dispatch({ type: 'OPEN_SIDEBAR' })
|
||||
const closeSidebarIfPresent = () =>
|
||||
state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' })
|
||||
|
||||
const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
|
||||
const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
|
||||
@ -149,6 +155,8 @@ export const UIProvider: FC = (props) => {
|
||||
...state,
|
||||
openSidebar,
|
||||
closeSidebar,
|
||||
toggleSidebar,
|
||||
closeSidebarIfPresent,
|
||||
openDropdown,
|
||||
closeDropdown,
|
||||
openModal,
|
||||
|
Loading…
x
Reference in New Issue
Block a user