From 1b800807629f457d30115545eb6ce171d0a3eccc Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 21 Oct 2020 12:17:26 -0300
Subject: [PATCH] Added dropdown

---
 components/core/UserNav/UserNav.module.css |  9 +++++++
 components/core/UserNav/UserNav.tsx        | 28 ++++++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 21b149f80..d6a8e296e 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -15,3 +15,12 @@
     @apply mr-0;
   }
 }
+
+.dropdownMenu {
+  @apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1;
+  max-width: 160px;
+
+  & .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;
+  }
+}
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 812c2a413..e005f625a 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import cn from 'classnames'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import { Avatar } from '@components/core'
@@ -17,6 +17,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
+  const [displayDropdown, setDisplayDropdown] = useState(false)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
@@ -39,10 +40,33 @@ const UserNav: FC<Props> = ({ className }) => {
             <Heart />
           </li>
         </Link>
-        <li className={s.item}>
+        <li
+          className={s.item}
+          onClick={() => {
+            setDisplayDropdown((i) => !i)
+          }}
+        >
           <Avatar />
         </li>
       </ul>
+
+      {displayDropdown && (
+        <div className={s.dropdownMenu}>
+          <div className="shadow-lg overflow-hidden">
+            <nav className="relative grid bg-primary py-2">
+              <Link href="#">
+                <a className={s.link}>My Purchases</a>
+              </Link>
+              <Link href="#">
+                <a className={s.link}>My Account</a>
+              </Link>
+              <Link href="#">
+                <a className={cn(s.link, 'mt-4')}>Logout</a>
+              </Link>
+            </nav>
+          </div>
+        </div>
+      )}
     </nav>
   )
 }