Fixing menu bars

Author: avenmia

src/components/Header.tsx

@@ -1,68 +1,11 @@
 import React from "react";
 import "../styles.css";
+import Menu from "./Menu";
 
 const Header = () => {
   return (
     <header>
-      <div className="mobile-menu-wrapper">
-        <button aria-label="menu button" className="menu-btn">
-          <div id="close-icon" className="close-icon" data-state="hide">
-            <i className="fa-solid fa-xmark"></i>
-          </div>
-          <div className="bar" data-state="visible"></div>
-          <div className="bar" data-state="visible"></div>
-          <div className="bar" data-state="visible"></div>
-        </button>
-        <nav className="mobile-navbar" data-state="close">
-          <ul className="list--mobile-nav">
-            <li>
-              <a className="link page-nav-link" href="#about">
-                About
-              </a>
-            </li>
-            <li>
-              <a className="link page-nav-link" href="#experience">
-                Experience
-              </a>
-            </li>
-            <li>
-              <a className="link page-nav-link" href="#projects">
-                Projects
-              </a>
-            </li>
-            <li>
-              <a
-                className="link link__external social-link__github"
-                href="https://github.com/avenmia/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a
-                className="link link__external social-link__linkedin"
-                href="https://www.linkedin.com/in/michael-avendano/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                LinkedIn
-              </a>
-            </li>
-            <li>
-              <a
-                className="link link__external social-link__stackoverflow"
-                href="https://stackoverflow.com/users/7331107/avenmia"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Stack Overflow
-              </a>
-            </li>
-          </ul>
-        </nav>
-      </div>
+      <Menu />
       <nav className="navbar">
         <a
           className="navbar__link"

src/components/Menu.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import "../styles.css";
+
+const Menu = () => {
+  const [open, setOpen] = useState(false);
+  const toggleMenu = () => setOpen(!open);
+
+  return (
+    <div className="mobile-menu-wrapper">
+      <button
+        aria-label="menu button"
+        className="menu-btn"
+        onClick={toggleMenu}
+      >
+        {open ? (
+          <div id="close-icon" className="close-icon">
+            <i className="fa-solid fa-xmark"></i>
+          </div>
+        ) : (
+          <div id="open-icon" className="open-icon">
+            <i className="fa-solid fa-bars"></i>
+          </div>
+        )}
+      </button>
+      {open ? (
+        <nav className="mobile-navbar">
+          <ul className="list--mobile-nav">
+            <li>
+              <a className="link page-nav-link" href="#about">
+                About
+              </a>
+            </li>
+            <li>
+              <a className="link page-nav-link" href="#experience">
+                Experience
+              </a>
+            </li>
+            <li>
+              <a className="link page-nav-link" href="#projects">
+                Projects
+              </a>
+            </li>
+            <li>
+              <a
+                className="link link__external social-link__github"
+                href="https://github.com/avenmia/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a
+                className="link link__external social-link__linkedin"
+                href="https://www.linkedin.com/in/michael-avendano/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                LinkedIn
+              </a>
+            </li>
+            <li>
+              <a
+                className="link link__external social-link__stackoverflow"
+                href="https://stackoverflow.com/users/7331107/avenmia"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Stack Overflow
+              </a>
+            </li>
+          </ul>
+        </nav>
+      ) : null}
+    </div>
+  );
+};
+
+export default Menu;

src/styles.css

@@ -238,29 +238,19 @@ li {
   display: none;
 }
 
-.bar[data-state="visible"] {
-  height: 0.2rem;
-  width: 1.5rem;
-  background-color: var(--section-accent-dark);
-  margin: 0.3125rem;
-  border-radius: 5px;
-}
-
-.bar[data-state="hide"] {
-  display: none;
+.open-icon .fa-bars {
+  color: var(--section-accent-dark); /* same color as your old bars */
+  font-size: 1.5rem; /* approximate width you had before */
+  margin: 0.3125rem; /* matches your old margin */
 }
 
-.close-icon[data-state="visible"] {
+.close-icon {
   display: block;
   color: white;
   font-size: 1.5rem;
   margin-left: 0.3125rem;
 }
 
-.close-icon[data-state="hide"] {
-  display: none;
-}
-
 .mobile-menu-wrapper {
   position: fixed;
   left: 1rem;