Change color of X.com logo and fix close button

ensdomains · Jan 28, 2024 · d3ed78a · d3ed78a
1 parent 1773bda
commit d3ed78a
Showing 1 changed file with 29 additions and 6 deletions.
diff --git a/blog/src/components/navbar/HamburgerMenu.tsx b/blog/src/components/navbar/HamburgerMenu.tsx
@@ -1,10 +1,11 @@
-import Image from 'next/image';
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+'use client';
 import Link from 'next/link';
 import { FC } 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 +17,14 @@ 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">
+                {/* X.com logo */}
+                <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' },
@@ -68,9 +76,24 @@ export const HamburgerMenu = () => {
     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
+                    id="button-hamburger"
+                    className="hover:bg-ens-grey2/20 flex items-center rounded-full p-2"
+                >
+                    <div
+                        onClick={() => {
+                            const activeElement =
+                                document.activeElement as HTMLElement;
+
+                            activeElement.blur();
+                        }}
+                        className="no-hover:group-hover:block hidden group-focus-within:block"
+                    >
+                        <CrossSVG className="" />
+                    </div>
+                    <div className="no-hover:group-hover:hidden group-focus-within:hidden">
+                        <MenuSVG className="" />
+                    </div>
                 </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">