feat: implement profile popover

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/banner.tsx

@@ -3,7 +3,7 @@ import Tooltip from './tooltip';
 
 function Banner() {
   return (
-    <div className="flex h-10 w-full items-center justify-center gap-x-8 bg-[#17E4BB] text-sm font-medium text-[#08312B]">
+    <div className="flex h-10 w-full items-center justify-center gap-x-8 bg-primary text-sm font-medium text-dark">
       <span>
         Speak to a Specialist Now:{' '}
         <a href={`tel:${8882422605}`} className="ml-1">

components/cart/modal.tsx

@@ -42,7 +42,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
       <button aria-label="Open cart" onClick={openCart}>
         <OpenCart quantity={cart?.totalQuantity} />
       </button>
-      <Transition show={isOpen}>
+      <Transition show={isOpen} as={Fragment}>
         <Dialog onClose={closeCart} className="relative z-50">
           <Transition.Child
             as={Fragment}

components/cart/open-cart.tsx

@@ -9,9 +9,9 @@ export default function OpenCart({
   quantity?: number;
 }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+    <div className="relative">
       <ShoppingCartIcon
-        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+        className={clsx('h-5 transition-all ease-in-out hover:scale-110 ', className)}
       />
 
       {quantity ? (

components/layout/navbar/index.tsx

@@ -1,6 +1,8 @@
 import Cart from 'components/cart';
 import OpenCart from 'components/cart/open-cart';
 import LogoSquare from 'components/logo-square';
+import Profile from 'components/profile';
+import OpenProfile from 'components/profile/open-profile';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
@@ -37,7 +39,10 @@ export default async function Navbar() {
               <Search />
             </Suspense>
           </div>
-          <div className="flex justify-end md:w-1/3">
+          <div className="flex justify-end gap-3 md:w-1/3">
+            <Suspense fallback={<OpenProfile />}>
+              <Profile />
+            </Suspense>
             <Suspense fallback={<OpenCart />}>
               <Cart />
             </Suspense>

components/profile/index.tsx

@@ -0,0 +1,10 @@
+import { getMenu } from 'lib/shopify';
+import ProfilePopover from './popover';
+
+const Profile = async () => {
+  const menu = await getMenu('profile-menu');
+
+  return <ProfilePopover menu={menu} />;
+};
+
+export default Profile;

components/profile/open-profile.tsx

@@ -0,0 +1,7 @@
+import { UserIcon } from '@heroicons/react/24/outline';
+
+const OpenProfile = () => {
+  return <UserIcon className="h-5 transition-all ease-in-out hover:scale-110" />;
+};
+
+export default OpenProfile;

components/profile/popover.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { Popover, Transition } from '@headlessui/react';
+import { ArrowRightIcon } from '@heroicons/react/16/solid';
+import { Menu } from 'lib/shopify/types';
+import { Fragment } from 'react';
+import OpenProfile from './open-profile';
+
+type ProfilePopoverProps = {
+  menu: Menu[];
+};
+
+const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
+  return (
+    <Popover className="relative">
+      <Popover.Button className="flex">
+        <OpenProfile />
+      </Popover.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute right-0 z-10 mt-2 w-auto min-w-48 max-w-sm px-4 sm:px-0">
+          <div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 shadow-lg ring-1 ring-black/5">
+            <span className="text-sm font-medium">My Account</span>
+            <a
+              href="#"
+              className="mt-1 rounded-sm bg-primary p-2 text-center text-xs font-medium uppercase text-white hover:bg-secondary "
+            >
+              Sign in
+            </a>
+            {menu.length ? (
+              <ul className="mt-2 flex w-full flex-col divide-y text-sm">
+                {menu.map((menuItem) => (
+                  <li className="cursor-pointer py-2 hover:underline" key={menuItem.title}>
+                    <a
+                      className="flex w-full flex-row items-center justify-between"
+                      href={menuItem.path}
+                    >
+                      {menuItem.title} <ArrowRightIcon className="h-3" />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export default ProfilePopover;

tailwind.config.js

@@ -5,6 +5,11 @@ module.exports = {
   content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      colors: {
+        primary: '#17E4BB',
+        dark: '#08312B',
+        secondary: '#12baa9'
+      },
       fontFamily: {
         sans: ['var(--font-geist-sans)']
       },