fix conflicts

components/core/Navbar/Navbar.tsx

@@ -3,7 +3,6 @@ import { FC } from 'react'
 import Link from 'next/link'
 import { Logo } from '@components/ui'
 import { Searchbar, UserNav } from '@components/core'
-
 interface Props {
   className?: string
 }

components/core/UserNav/DropdownMenu.module.css

@@ -0,0 +1,29 @@
+.dropdownMenu {
+  @apply fixed top-0 right-0 z-20 w-full h-full;
+
+  @screen lg {
+    @apply absolute right-0 w-screen;
+    max-width: 200px;
+  }
+
+  & .dropdownMenuContainer {
+    @apply flex-col py-6 bg-primary h-full justify-around;
+
+    @screen lg {
+      @apply border border-accents-1 shadow-lg py-2 h-auto;
+    }
+  }
+
+  & .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;
+    text-transform: capitalize;
+
+    & .icons svg {
+      @apply w-6 h-6;
+    }
+  }
+
+  &.off {
+    @apply hidden;
+  }
+}

components/core/UserNav/DropdownMenu.tsx

@@ -0,0 +1,75 @@
+import { useTheme } from 'next-themes'
+import s from './DropdownMenu.module.css'
+import { FC } from 'react'
+import { FocusScope } from '@react-aria/focus'
+import {
+  useOverlay,
+  DismissButton,
+  usePreventScroll,
+} from '@react-aria/overlays'
+import Link from 'next/link'
+import cn from 'classnames'
+import { Moon, Sun } from '@components/icon'
+interface DropdownMenuProps {
+  onClose: () => void
+  innerRef: React.MutableRefObject<HTMLInputElement>
+}
+
+const DropdownMenu: FC<DropdownMenuProps> = ({
+  onClose,
+  children,
+  innerRef,
+  ...props
+}) => {
+  const { theme, setTheme } = useTheme()
+
+  let { overlayProps } = useOverlay(
+    {
+      isDismissable: true,
+      onClose: onClose,
+      isOpen: true,
+    },
+    innerRef
+  )
+
+  usePreventScroll()
+  return (
+    <FocusScope restoreFocus>
+      <div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
+        {/* Needed placeholder for User Interation*/}
+        <div className="flex justify-end">
+          <span onClick={onClose} className="bg-transparent h-12 w-12" />
+        </div>
+
+        <nav className={s.dropdownMenuContainer}>
+          <Link href="#">
+            <a className={s.link}>My Purchases</a>
+          </Link>
+          <Link href="#">
+            <a className={s.link}>My Account</a>
+          </Link>
+          <a
+            className={s.link}
+            onClick={() =>
+              theme === 'dark' ? setTheme('light') : setTheme('dark')
+            }
+          >
+            <span>
+              Theme: <strong>{theme}</strong>{' '}
+            </span>
+            <span className={s.icons}>
+              {theme === 'dark' ? <Moon /> : <Sun />}
+            </span>
+          </a>
+          <Link href="#">
+            <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
+              Logout
+            </a>
+          </Link>
+        </nav>
+      </div>
+    </FocusScope>
+  )
+}
+
+export default DropdownMenu

components/core/UserNav/UserNav.module.css

@@ -2,30 +2,25 @@
   @apply relative;
 }
 
+.mainContainer {
+}
+
 .list {
-  @apply flex flex-row items-center h-full;
+  @apply flex flex-row items-center justify-items-end h-full;
 }
 
 .item {
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
+
   &:hover {
-    @apply text-accents-8;
+    @apply text-accents-8 transition ease-in-out duration-100 transform scale-110;
+  }
+
+  &.heart:hover svg {
+    fill: var(--accents-9);
   }
 
   &:last-child {
     @apply mr-0;
   }
 }
-
-.dropdownMenu {
-  @apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary;
-  max-width: 160px;
-
-  &.dropdownMenuContainer {
-    @apply shadow-lg overflow-hidden relative grid py-2;
-  }
-
-  & .link {
-    @apply px-6 py-3 flex items-center space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
-  }
-}

components/core/UserNav/UserNav.tsx

@@ -1,82 +1,68 @@
-import { FC, useState } from 'react'
+import Link from 'next/link'
 import cn from 'classnames'
-import useCart from '@lib/bigcommerce/cart/use-cart'
-import { Avatar, Toggle } from '@components/core'
+import s from './UserNav.module.css'
+import { FC, useRef } from 'react'
+
+import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
-import s from './UserNav.module.css'
-import { useTheme } from 'next-themes'
-import Link from 'next/link'
+import DropdownMenu from './DropdownMenu'
+
+import useCart from '@lib/bigcommerce/cart/use-cart'
+
 interface Props {
   className?: string
 }
 
 const countItem = (count: number, item: any) => count + item.quantity
-
 const countItems = (count: number, items: any[]) =>
   items.reduce(countItem, count)
 
-const UserNav: FC<Props> = ({ className }) => {
+const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
-  const { theme, setTheme } = useTheme()
-  const [displayDropdown, setDisplayDropdown] = useState(false)
-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
+  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>
 
   return (
     <nav className={cn(s.root, className)}>
-      <ul className={s.list}>
-        <li
-          className={s.item}
-          onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
-        >
-          <Bag />
-          {itemsCount > 0 && (
-            <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
-              {itemsCount}
-            </span>
-          )}
-        </li>
-        <Link href="/wishlist">
-          <li className={s.item}>
-            <Heart />
+      <div className={s.mainContainer}>
+        <ul className={s.list}>
+          <li
+            className={s.item}
+            onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
+          >
+            <Bag />
+            {itemsCount > 0 && (
+              <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
+                {itemsCount}
+              </span>
+            )}
           </li>
-        </Link>
-        <li
-          className={s.item}
-          onClick={() => {
-            setDisplayDropdown((i) => !i)
-          }}
-        >
-          <Avatar />
-        </li>
-      </ul>
+          <Link href="/wishlist">
+            <li className={cn(s.item, s.heart)}>
+              <Heart />
+            </li>
+          </Link>
+          <li
+            className={s.item}
+            onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
+          >
+            <Avatar />
+          </li>
+        </ul>
+      </div>
 
       {displayDropdown && (
-        <div className={s.dropdownMenu}>
-          <nav className={s.dropdownMenuContainer}>
-            <Link href="#">
-              <a className={s.link}>My Purchases</a>
-            </Link>
-            <Link href="#">
-              <a className={s.link}>My Account</a>
-            </Link>
-            <span className="inline-flex items-start px-6 py-2">
-              <span className="capitalize inline-block mr-2 text-base leading-6 font-medium text-gray-900">
-                Theme
-              </span>
-              <Toggle
-                checked={theme === 'dark'}
-                onChange={() =>
-                  theme === 'dark' ? setTheme('light') : setTheme('dark')
-                }
-              />
-            </span>
-            <Link href="#">
-              <a className={cn(s.link, 'mt-4')}>Logout</a>
-            </Link>
-          </nav>
-        </div>
+        <DropdownMenu onClose={closeDropdown} innerRef={ref} />
       )}
     </nav>
   )

components/icon/Moon.tsx

@@ -0,0 +1,19 @@
+const Moon = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+    >
+      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+    </svg>
+  )
+}
+
+export default Moon

components/icon/Sun.tsx

@@ -0,0 +1,27 @@
+const Sun = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <path d="M12 1v2" />
+      <path d="M12 21v2" />
+      <path d="M4.22 4.22l1.42 1.42" />
+      <path d="M18.36 18.36l1.42 1.42" />
+      <path d="M1 12h2" />
+      <path d="M21 12h2" />
+      <path d="M4.22 19.78l1.42-1.42" />
+      <path d="M18.36 5.64l1.42-1.42" />
+    </svg>
+  )
+}
+
+export default Sun

components/icon/index.ts

@@ -6,3 +6,5 @@ export { default as ArrowLeft } from './ArrowLeft'
 export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
 export { default as Check } from './Check'
+export { default as Sun } from './Sun'
+export { default as Moon } from './Moon'

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/Container/Container.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className)
+  const rootClassName = cn('mx-auto max-w-7xl px-6', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement

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>