From c22789176da34b04d97cf4a16b1c3b801acc6293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= <julianbenegas99@gmail.com>
Date: Wed, 21 Oct 2020 18:32:32 -0300
Subject: [PATCH] sticky nav, better dropdown exit

---
 components/core/Layout/Layout.tsx             | 32 +++++++++++++--
 components/core/UserNav/UserNav.tsx           | 40 ++++++++++++++++---
 .../ProductView/ProductView.module.css        |  2 +-
 tailwind.config.js                            |  4 ++
 4 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index e6e45fb26..f2deda1ee 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import cn from 'classnames'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { CommerceProvider } from '@lib/bigcommerce'
@@ -18,13 +18,37 @@ interface Props {
 const Layout: FC<Props> = ({ children, pageProps }) => {
   const { displaySidebar, closeSidebar } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  useEffect(() => {
+    const offset = 0
+    function handleScroll() {
+      const { scrollTop } = document.documentElement
+      if (scrollTop > offset) setHasScrolled(true)
+      else setHasScrolled(false)
+    }
+    document.addEventListener('scroll', handleScroll)
+
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
 
   return (
     <CommerceProvider locale="en-us">
       <div className={cn(s.root)}>
-        <Container>
-          <Navbar />
-        </Container>
+        <header
+          className={cn(
+            'sticky top-0 bg-primary z-40 transition-shadow duration-200',
+            {
+              'shadow-magical': hasScrolled,
+            }
+          )}
+        >
+          <Container>
+            <Navbar />
+          </Container>
+        </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
         <Sidebar show={displaySidebar} close={closeSidebar}>
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index b25ffee6c..772ff6c33 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import cn from 'classnames'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import { Avatar } from '@components/core'
@@ -21,6 +21,30 @@ const UserNav: FC<Props> = ({ className }) => {
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
+  useEffect(() => {
+    function handleClick(e: any) {
+      const isInside = e?.target?.closest(`#user-dropdown`) !== null
+      if (isInside) return
+      setDisplayDropdown(false)
+      document.removeEventListener('click', handleClick)
+    }
+    function handleKeyPress(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setDisplayDropdown(false)
+        document.removeEventListener('keydown', handleKeyPress)
+      }
+    }
+
+    if (displayDropdown) {
+      document.addEventListener('click', handleClick)
+      document.addEventListener('keydown', handleKeyPress)
+      return () => {
+        document.removeEventListener('click', handleClick)
+        document.removeEventListener('keydown', handleKeyPress)
+      }
+    }
+  }, [displayDropdown])
+
   return (
     <nav className={cn(s.root, className)}>
       <ul className={s.list}>
@@ -40,18 +64,21 @@ const UserNav: FC<Props> = ({ className }) => {
             <Heart />
           </li>
         </Link>
-        <li
-          className={s.item}
+        <button
+          className={cn(
+            s.item,
+            'rounded-full focus:shadow-outline-blue focus:outline-none'
+          )}
           onClick={() => {
             setDisplayDropdown((i) => !i)
           }}
         >
           <Avatar />
-        </li>
+        </button>
       </ul>
 
       {displayDropdown && (
-        <div className={s.dropdownMenu}>
+        <div className={cn(s.dropdownMenu, 'shadow-lg')} id="user-dropdown">
           <nav className={s.dropdownMenuContainer}>
             <Link href="#">
               <a className={s.link}>My Purchases</a>
@@ -59,8 +86,9 @@ const UserNav: FC<Props> = ({ className }) => {
             <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, 'mt-4')}>Logout</a>
+              <a className={cn(s.link)}>Logout</a>
             </Link>
           </nav>
         </div>
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 99346db11..615cc7047 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/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-30;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
diff --git a/tailwind.config.js b/tailwind.config.js
index 03b3c7f7b..adff9a7f6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,6 +37,10 @@ module.exports = {
         primary: 'var(--text-primary)',
         secondary: 'var(--text-secondary)',
       },
+      boxShadow: {
+        magical:
+          'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
+      },
     },
   },
   variants: {},