Merge pull request #190 from ShravanAYG/fix-mobile-hamburger-menu

Fix Mobile hamburger menu
pbdsce · Jan 20, 2025 · e439deb · e439deb
2 parents bc65ea5 + 7187ea1
commit e439deb
Showing 1 changed file with 30 additions and 8 deletions.
diff --git a/components/ui/mobile-menu.tsx b/components/ui/mobile-menu.tsx
@@ -54,17 +54,39 @@ export default function MobileMenu() {
   return (
     <div className="flex md:hidden">
       <button
-        ref={trigger}
-        className={`hamburger ml-5 ${mobileNavOpen && 'active'}`}
+	ref={trigger}
+        className="hamburger ml-5"
         aria-controls="mobile-nav"
-        aria-expanded={mobileNavOpen}
+        aria-expanded={mobileNavOpen ? "true" : "false"}
         onClick={() => setMobileNavOpen(!mobileNavOpen)}
       >
         <span className="sr-only">Menu</span>
-        <svg className="w-6 h-6 fill-current text-gray-100" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <rect y="4" width="24" height="2" />
-          <rect y="11" width="24" height="2" />
-          <rect y="18" width="24" height="2" />
+        <svg
+          className={`w-6 h-6 fill-current text-gray-100 transform transition-transform duration-300 ${
+            mobileNavOpen ? "rotate-90" : ""
+          }`}
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          {mobileNavOpen ? (
+            // Close button
+            <g
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+              strokeLinecap="round"
+            >
+              <line x1="6" y1="6" x2="18" y2="18" />
+              <line x1="6" y1="18" x2="18" y2="6" />
+            </g>
+          ) : (
+            //three lines
+            <>
+              <rect y="4" width="24" height="2" fill="currentColor" />
+              <rect y="11" width="24" height="2" fill="currentColor" />
+              <rect y="18" width="24" height="2" fill="currentColor" />
+            </>
+          )}
         </svg>
       </button>
 
@@ -121,4 +143,4 @@ export default function MobileMenu() {
       </div>
     </div>
   );
-}
+}