Dismissable Dropdown

components/core/UserNav/UserNav.module.css

@@ -22,10 +22,10 @@
 }
 
 .dropdownMenu {
-  @apply bg-primary fixed right-0 z-50 w-full h-full;
+  @apply fixed top-0 right-0 z-20 w-full h-full;
 
   @screen lg {
-    @apply absolute mt-3 right-0 w-screen;
+    @apply absolute right-0 w-screen;
     max-width: 160px;
   }
 

components/core/UserNav/UserNav.tsx

@@ -25,12 +25,18 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
-  const [displayDropdown, setDisplayDropdown] = useState(false)
+  const {
+    openSidebar,
+    closeSidebar,
+    displaySidebar,
+    displayDropdown,
+    openDropdown,
+    closeDropdown,
+  } = useUI()
+
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
 
-  const toggleDropdown = () => setDisplayDropdown((v) => !v)
   return (
     <nav className={cn(s.root, className)}>
       <div className={s.mainContainer}>
@@ -51,17 +57,17 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
               <Heart />
             </li>
           </Link>
-          <li className={s.item} onClick={() => toggleDropdown()}>
+          <li
+            className={s.item}
+            onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
+          >
             <Avatar />
           </li>
         </ul>
       </div>
-      <DismissButton onDismiss={() => setDisplayDropdown(false)} />
+
       {displayDropdown && (
-        <DropdownMenu
-          onClose={() => setDisplayDropdown(false)}
-          innerRef={ref}
-        />
+        <DropdownMenu onClose={closeDropdown} innerRef={ref} />
       )}
     </nav>
   )
@@ -82,6 +88,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
 
   let { overlayProps } = useOverlay(
     {
+      isDismissable: true,
       onClose: onClose,
       isOpen: true,
     },
@@ -90,8 +97,9 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
 
   usePreventScroll()
   return (
-    <FocusScope contain restoreFocus autoFocus>
+    <FocusScope restoreFocus>
       <div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
+        <span onClick={onClose} className="w-full bg-transparent block h-12" />
         <nav className={s.dropdownMenuContainer}>
           <Link href="#">
             <a className={s.link}>My Purchases</a>

components/product/ProductView/ProductView.module.css

@@ -34,7 +34,7 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-0 z-50;
+  @apply absolute top-6 left-0 z-10;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;

components/ui/context.tsx

@@ -4,10 +4,12 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
 
 export interface State {
   displaySidebar: boolean
+  displayDropdown: boolean
 }
 
 const initialState = {
   displaySidebar: false,
+  displayDropdown: false,
 }
 
 type Action =
@@ -17,21 +19,61 @@ type Action =
   | {
       type: 'CLOSE_SIDEBAR'
     }
+  | {
+      type: 'OPEN_DROPDOWN'
+    }
+  | {
+      type: 'CLOSE_DROPDOWN'
+    }
 
 export const UIContext = React.createContext<State | any>(initialState)
 
 UIContext.displayName = 'UIContext'
 
+function uiReducer(state: State, action: Action) {
+  switch (action.type) {
+    case 'OPEN_SIDEBAR': {
+      return {
+        ...state,
+        displaySidebar: true,
+      }
+    }
+    case 'CLOSE_SIDEBAR': {
+      return {
+        ...state,
+        displaySidebar: false,
+      }
+    }
+    case 'OPEN_DROPDOWN': {
+      return {
+        ...state,
+        displayDropdown: true,
+      }
+    }
+    case 'CLOSE_DROPDOWN': {
+      return {
+        ...state,
+        displayDropdown: false,
+      }
+    }
+  }
+}
+
 export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
   const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
 
+  const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
+  const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
+
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
+    openDropdown,
+    closeDropdown,
   }
 
   return <UIContext.Provider value={value} {...props} />
@@ -45,27 +87,6 @@ export const useUI = () => {
   return context
 }
 
-function uiReducer(state: State, action: Action) {
-  switch (action.type) {
-    case 'OPEN_SIDEBAR': {
-      return !state.displaySidebar
-        ? {
-            ...state,
-            displaySidebar: true,
-          }
-        : state
-    }
-    case 'CLOSE_SIDEBAR': {
-      return state.displaySidebar
-        ? {
-            ...state,
-            displaySidebar: false,
-          }
-        : state
-    }
-  }
-}
-
 export const ManagedUIContext: FC = ({ children }) => (
   <UIProvider>
     <ThemeProvider>