replace custom dropdown menu with headless ui menu component

Author: devKiratu

package-lock.json

@@ -14,6 +14,7 @@
     "validate": "concurrently --kill-others-on-fail -g -p \"[{name}]\" -n \"prettier,lint,typecheck,build\" \"npm:prettier:check -s\" \"npm:lint -s\" \"npm:typecheck -s\" \"npm:build -s -- --no-lint\""
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.3",
     "next": "12.3.1",
     "react": "18.1.0",
     "react-dom": "18.1.0"

package.json

@@ -4,58 +4,81 @@ import infoIcon from '../../../public/img/info-icon.svg';
 import calendarIcon from '../../../public/img/calendar-icon.svg';
 import contactIcon from '../../../public/img/contact-icon.svg';
 import { ABOUT, CONTACT, EVENTS } from '../../util/routeConstants';
-import LinkButton from '../LinkButton/LinkButton';
+import menuIcon from '../../../public/img/menu-icon.svg';
+import closeIcon from '../../../public/img/close-icon.svg';
+import { Menu } from '@headlessui/react';
 
-interface DropdownMenuProps {
-  onCloseMenu: () => void;
-}
-
-export default function DropdownMenu({ onCloseMenu }: DropdownMenuProps) {
+export default function DropdownMenu() {
   return (
-    <div className="bg-white rounded-[10px] overflow-hidden w-[158px] h-fit absolute top-14 right-5 shadow-[0_0_50px_-12px_rgb(0,0,0,0.25)]">
-      <ul>
-        <li className="">
-          <a
-            href={ABOUT}
-            className="w-full p-[10px] flex justify-start items-center"
-            onClick={() => onCloseMenu()}
-          >
-            <Image src={infoIcon} alt="" width={25} height={22} />
-            <p className="inline-block ml-[10px]">About us</p>
-          </a>
-        </li>
-        <li className="">
-          <a
-            href={EVENTS}
-            className="w-full p-[10px] flex justify-start items-center"
-            onClick={() => onCloseMenu()}
-          >
-            <Image src={calendarIcon} alt="" width={25} height={22} />
-            <p className="inline-block ml-[10px]">Events</p>
-          </a>
-        </li>
-        <li className="">
-          <a
-            href={CONTACT}
-            className="w-full p-[10px] flex justify-start items-center"
-            onClick={() => onCloseMenu()}
-          >
-            <Image src={contactIcon} alt="" width={25} height={25} />
-            <p className="inline-block ml-[10px]">Contact</p>
-          </a>
-        </li>
-      </ul>
-      <div className="">
-        <LinkButton
-          className="flex justify-center items-center bg-[#12A04E] text-white w-full font-montserrat text-xs py-[10px]"
-          href="https://bit.ly/joinreactdevske"
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={() => onCloseMenu()}
-        >
-          Join React.JS Kenya
-        </LinkButton>
+    <Menu>
+      <Menu.Button>
+        {({ open }) =>
+          open ? (
+            <div className="inline-flex justify-center items-center w-[30px] ">
+              <Image src={closeIcon} alt="" width={20} height={20} />
+            </div>
+          ) : (
+            <Image src={menuIcon} alt="" width={30} height={30} />
+          )
+        }
+      </Menu.Button>
+      <div className="bg-white rounded-[10px] overflow-hidden w-[158px] h-fit absolute top-14 right-5 shadow-[0_0_50px_-12px_rgb(0,0,0,0.25)]">
+        <Menu.Items>
+          <Menu.Item>
+            {({ active }) => (
+              <a
+                href={ABOUT}
+                className={`w-full p-[10px] flex justify-start items-center ${
+                  active && 'bg-green-100'
+                }`}
+              >
+                <Image src={infoIcon} alt="" width={25} height={22} />
+                <p className="inline-block ml-[10px]">About us</p>
+              </a>
+            )}
+          </Menu.Item>
+          <Menu.Item>
+            {({ active }) => (
+              <a
+                href={EVENTS}
+                className={`w-full p-[10px] flex justify-start items-center ${
+                  active && 'bg-green-100'
+                }`}
+              >
+                <Image src={calendarIcon} alt="" width={25} height={22} />
+                <p className="inline-block ml-[10px]">Events</p>
+              </a>
+            )}
+          </Menu.Item>
+          <Menu.Item>
+            {({ active }) => (
+              <a
+                href={CONTACT}
+                className={`w-full p-[10px] flex justify-start items-center ${
+                  active && 'bg-green-100'
+                }`}
+              >
+                <Image src={contactIcon} alt="" width={25} height={25} />
+                <p className="inline-block ml-[10px]">Contact</p>
+              </a>
+            )}
+          </Menu.Item>
+          <Menu.Item>
+            {({ active }) => (
+              <a
+                className={`flex justify-center items-center bg-[#12A04E] text-white w-full font-montserrat text-xs py-[10px] ${
+                  active && 'bg-green-500'
+                }`}
+                href="https://bit.ly/joinreactdevske"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Join React.JS Kenya
+              </a>
+            )}
+          </Menu.Item>
+        </Menu.Items>
       </div>
-    </div>
+    </Menu>
   );
 }

src/components/HeroHeader/DropdownMenu.tsx

@@ -1,22 +1,21 @@
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React from 'react';
 import Logo from '../Logo';
 import githubIcon from '../../../public/img/github-logo.svg';
-import menuIcon from '../../../public/img/menu-icon.svg';
-import closeIcon from '../../../public/img/close-icon.svg';
 import DropdownMenu from './DropdownMenu';
 import LinkButton from '../LinkButton/LinkButton';
+import Link from 'next/link';
+import { HOME } from '../../util/routeConstants';
 
 export default function MobileHero() {
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  const openMenu = () => setMenuOpen(true);
-  const closeMenu = () => setMenuOpen(false);
-
   return (
     <div className="relative">
       <div className="mx-6 pt-2 pb-5 flex justify-between">
-        <Logo size={60} />
+        <Link href={HOME}>
+          <a>
+            <Logo size={60} />
+          </a>
+        </Link>
         <a
           target="_blank"
           href="https://github.com/reactdeveloperske/reactdevske-website"
@@ -25,29 +24,8 @@ export default function MobileHero() {
         >
           <Image src={githubIcon} alt="" width={35} height={35} />
         </a>
-        {menuOpen ? (
-          <div className="inline-flex justify-center items-center w-[30px] ">
-            <Image
-              src={closeIcon}
-              alt=""
-              width={20}
-              height={20}
-              className="cursor-pointer"
-              onClick={closeMenu}
-            />
-          </div>
-        ) : (
-          <Image
-            src={menuIcon}
-            alt=""
-            width={30}
-            height={30}
-            className="cursor-pointer"
-            onClick={openMenu}
-          />
-        )}
+        <DropdownMenu />
       </div>
-      {menuOpen && <DropdownMenu onCloseMenu={closeMenu} />}
       <div>
         <h1 className="font-robotoMono font-medium text-4xl text-center mb-2">
           ReactDevsKe