Merge pull request #21 from marbiano/mini-cart-fixes

Sidebar fixes

components/core/UserNav/DropdownMenu.tsx

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

components/core/UserNav/UserNav.tsx

@@ -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
+          <li className={s.item} onClick={toggleSidebar}>
-            className={s.item}
-            onClick={(e) => (displaySidebar ? closeSidebar() : openSidebar())}
-          >
             <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>

components/ui/context.tsx

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