Merge branch 'master' into jb/product-improvements

components/core/Navbar/Navbar.tsx

@@ -3,14 +3,14 @@ import { FC } from 'react'
 import Link from 'next/link'
 import { useTheme } from 'next-themes'
 import { Logo } from '@components/ui'
-import { Searchbar, Toggle, UserNav } from '@components/core'
+import { Searchbar, UserNav } from '@components/core'
 interface Props {
   className?: string
 }
 
 const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = className
-  const { theme, setTheme } = useTheme()
+
   return (
     <div className={rootClassName}>
       <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
@@ -38,12 +38,6 @@ const Navbar: FC<Props> = ({ className }) => {
         </div>
 
         <div className="flex flex-1 justify-end space-x-8">
-          <Toggle
-            checked={theme === 'dark'}
-            onChange={() =>
-              theme === 'dark' ? setTheme('light') : setTheme('dark')
-            }
-          />
           <UserNav />
         </div>
       </div>

components/core/UserNav/UserNav.module.css

@@ -2,8 +2,11 @@
   @apply relative;
 }
 
+.mainContainer {
+}
+
 .list {
-  @apply flex flex-row items-center h-full;
+  @apply flex flex-row items-center justify-items-end h-full;
 }
 
 .item {
@@ -18,14 +21,26 @@
 }
 
 .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;
+  @apply bg-primary fixed right-0 z-50 w-full h-full;
 
-  &.dropdownMenuContainer {
-    @apply shadow-lg overflow-hidden relative grid py-2;
+  @screen lg {
+    @apply absolute mt-3 right-0 w-screen;
+    max-width: 160px;
+  }
+
+  & .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 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;
+    @apply 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;
+  }
+
+  &.off {
+    @apply hidden;
   }
 }

components/core/UserNav/UserNav.tsx

@@ -1,25 +1,34 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState, useRef } from 'react'
+import Link from 'next/link'
 import cn from 'classnames'
-import useCart from '@lib/bigcommerce/cart/use-cart'
+import s from './UserNav.module.css'
+import { useTheme } from 'next-themes'
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
-import s from './UserNav.module.css'
-import Link from 'next/link'
+import { FocusScope } from '@react-aria/focus'
+
+import {
+  useOverlay,
+  DismissButton,
+  usePreventScroll,
+} from '@react-aria/overlays'
+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 [displayDropdown, setDisplayDropdown] = useState(false)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
+  const [displayDropdown, setDisplayDropdown] = useState(false)
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
 
   useEffect(() => {
     function handleClick(e: any) {
@@ -45,56 +54,92 @@ const UserNav: FC<Props> = ({ className }) => {
     }
   }, [displayDropdown])
 
+  const toggleDropdown = () => setDisplayDropdown((v) => !v)
   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>
-        <button
-          className={cn(
-            s.item,
-            'rounded-full focus:shadow-outline-blue focus:outline-none'
-          )}
-          onClick={() => {
-            setDisplayDropdown((i) => !i)
-          }}
-        >
-          <Avatar />
-        </button>
-      </ul>
-
+          <Link href="/wishlist">
+            <li className={s.item}>
+              <Heart />
+            </li>
+          </Link>
+          <li className={s.item} onClick={toggleDropdown}>
+            <Avatar />
+          </li>
+        </ul>
+      </div>
+      <DismissButton onDismiss={() => setDisplayDropdown(false)} />
       {displayDropdown && (
-        <div className={cn(s.dropdownMenu, 'shadow-lg')} id="user-dropdown">
-          <nav className={s.dropdownMenuContainer}>
-            <Link href="#">
-              <a className={s.link}>My Purchases</a>
-            </Link>
-            <Link href="#">
-              <a className={s.link}>My Account</a>
-            </Link>
-            <div className="my-1 h-px w-full bg-accents-2" />
-            <Link href="#">
-              <a className={cn(s.link)}>Logout</a>
-            </Link>
-          </nav>
-        </div>
+        <DropdownMenu
+          onClose={() => setDisplayDropdown(false)}
+          innerRef={ref}
+        />
       )}
     </nav>
   )
 }
 
+interface DropdownMenuProps {
+  onClose: () => void
+  innerRef: React.MutableRefObject<HTMLInputElement>
+}
+
+const DropdownMenu: FC<DropdownMenuProps> = ({
+  onClose,
+  children,
+  innerRef,
+  ...props
+}) => {
+  const { theme, setTheme } = useTheme()
+
+  let { overlayProps } = useOverlay(
+    {
+      onClose: onClose,
+      isOpen: true,
+    },
+    innerRef
+  )
+
+  usePreventScroll()
+  return (
+    <FocusScope contain restoreFocus autoFocus>
+      <div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
+        <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')
+            }
+          >
+            Theme: <strong>{theme}</strong>
+          </a>
+          <Link href="#">
+            <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
+              Logout
+            </a>
+          </Link>
+        </nav>
+      </div>
+    </FocusScope>
+  )
+}
+
 export default UserNav

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