Updated Burger Menu

Kaleb-Rupe · Aug 19, 2024 · b48cfae · b48cfae
1 parent f4bb722
commit b48cfae
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -121,4 +121,31 @@
     .mobile-nav a:hover {
         color: var(--header-hover-color);
     }
+}
+
+.burger-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 24px;
+  height: 18px;
+}
+
+.burger-line {
+  width: 100%;
+  height: 2px;
+  background-color: var(--header-text-color);
+  transition: all 0.3s ease;
+}
+
+.menu-toggle.open .burger-line:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+
+.menu-toggle.open .burger-line:nth-child(2) {
+  opacity: 0;
+}
+
+.menu-toggle.open .burger-line:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
 }
diff --git a/src/shared/Header.js b/src/shared/Header.js
@@ -42,12 +42,17 @@ const Header = () => {
         </Link>
         {isMobile ? (
           <button
-            className="menu-toggle"
+            className={`menu-toggle ${isMenuOpen ? 'open' : ''}`}
             onClick={toggleMenu}
             aria-expanded={isMenuOpen}
             aria-controls="mobile-menu"
           >
-            {isMenuOpen ? "Close" : "Menu"}
+            <span className="burger-icon">
+              <span className="burger-line"></span>
+              <span className="burger-line"></span>
+              <span className="burger-line"></span>
+            </span>
+            <span className="visually-hidden">{isMenuOpen ? "Close menu" : "Open menu"}</span>
           </button>
         ) : (
           <nav className="header-nav" aria-label="Main Navigation">