Change color of X logo and make X button work.

ensdomains · Jan 27, 2024 · 6b3b740 · 6b3b740
1 parent 1773bda
commit 6b3b740
Showing 1 changed file with 56 additions and 12 deletions.
diff --git a/blog/src/components/navbar/HamburgerMenu.tsx b/blog/src/components/navbar/HamburgerMenu.tsx
@@ -1,10 +1,9 @@
-import Image from 'next/image';
+'use client';
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useEffect, useRef } from 'react';
 import { FaDiscord, FaYoutube } from 'react-icons/fa';
 import { FiGithub, FiMessageCircle } from 'react-icons/fi';
 
-import xLogo from '../../../public/icons/x.svg';
 import { CrossSVG, MenuSVG } from '../ClientIcons';
 
 const links = [
@@ -16,7 +15,13 @@ const links = [
 
 const socials = [
     {
-        icon: <Image src={xLogo} className="w-5" alt="text-neutral-400" />,
+        icon: (
+            <div className="h-5 w-5 fill-neutral-400 transition-colors hover:fill-black">
+                <svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
+                </svg>
+            </div>
+        ),
         to: 'https://twitter.com/ensdomains',
     },
     { icon: <FiGithub />, to: 'https://github.com/ensdomains' },
@@ -65,17 +70,56 @@ const Content: FC = () => {
 };
 
 export const HamburgerMenu = () => {
+    const componentReference = useRef(null);
+
+    // On loss of focus-within, close the menu
+    useEffect(() => {
+        const listener = (event: MouseEvent) => {
+            if (
+                componentReference.current &&
+                !componentReference.current.contains(event.target)
+            ) {
+                const checkbox = document.querySelector(
+                    '#menuToggle'
+                ) as HTMLInputElement;
+
+                checkbox.checked = false;
+            }
+        };
+
+        document.addEventListener('mousedown', listener);
+
+        return () => {
+            document.removeEventListener('mousedown', listener);
+        };
+    }, []);
+
     return (
-        <div className="group">
-            <div className="text-ens-grey2 fill-ens-grey2">
-                <button className="hover:bg-ens-grey2/20 flex items-center rounded-full p-2">
-                    <CrossSVG className="no-hover:group-hover:block hidden group-focus-within:block" />
-                    <MenuSVG className="no-hover:group-hover:hidden group-focus-within:hidden" />
-                </button>
-            </div>
-            <div className="card no-hover:group-hover:block absolute left-0 top-[4.8rem] hidden w-full group-focus-within:block sm:left-[unset] sm:w-80">
+        <div className="group z-50" ref={componentReference}>
+            <input type="checkbox" id="menuToggle" className="hidden" />
+            <label
+                htmlFor="menuToggle"
+                className="text-ens-grey2 fill-ens-grey2 flex cursor-pointer items-center rounded-full p-2"
+            >
+                <CrossSVG className="hidden" />
+                <MenuSVG />
+            </label>
+            <div className="card absolute left-0 top-[4.8rem] hidden w-full sm:left-[unset] sm:w-80">
                 <Content />
             </div>
+
+            <style jsx>{`
+                /* Complicated CSS rules which allow opening-and-closing without JS */
+                #menuToggle:checked ~ label > :global(svg):first-child {
+                    display: block;
+                }
+                #menuToggle:checked ~ label > :global(svg):last-child {
+                    display: none;
+                }
+                #menuToggle:checked ~ .card {
+                    display: block;
+                }
+            `}</style>
         </div>
     );
 };