fixed hamburger x

potatoqualitee · Dec 16, 2024 · add3cc7 · add3cc7
1 parent f1e38db
commit add3cc7
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 9 deletions.
diff --git a/css/components/nav/mobile.css b/css/components/nav/mobile.css
@@ -3,8 +3,8 @@
     display: none;
     flex-direction: column;
     justify-content: space-between;
-    width: 24px;
-    height: 20px;
+    width: 28px;
+    height: 22px;
     background: none;
     border: none;
     cursor: pointer;
@@ -16,7 +16,11 @@
     width: 100%;
     height: 2px;
     background: var(--text);
-    transition: var(--transition);
+    transition: transform 0.3s ease;
+}
+
+.hamburger-menu:hover span {
+    background: var(--accent);
 }
 
 /* Hide mobile mode switches by default (desktop) */
@@ -46,10 +50,25 @@
     }
 
     .hamburger-menu {
-        display: flex;
+        display: flex !important;
         position: absolute;
-        top: 17px;
+        top: 16px;
         right: var(--spacing-sm);
+        z-index: 1001;
+    }
+
+    /* Ensure dropdown appears below hamburger */
+    .user-menu-dropdown {
+        display: none;
+    }
+
+    .user-menu.active .user-menu-dropdown {
+        display: block;
+    }
+
+    /* Ensure menu is above other content */
+    .user-menu.active {
+        z-index: 1000;
     }
 
     /* Hide non-essential elements on mobile */
@@ -151,15 +170,25 @@
     }
 
     /* Hamburger menu active state */
+    .hamburger-menu.active {
+        display: flex !important;
+    }
+
+    .hamburger-menu.active span {
+        width: 100%;
+        height: 2px;
+        background: var(--text);
+    }
+
     .hamburger-menu.active span:nth-child(1) {
-        transform: translateY(9px) rotate(45deg);
+        transform: translateY(10px) rotate(45deg);
     }
 
     .hamburger-menu.active span:nth-child(2) {
         opacity: 0;
     }
 
     .hamburger-menu.active span:nth-child(3) {
-        transform: translateY(-9px) rotate(-45deg);
+        transform: translateY(-10px) rotate(-45deg);
     }
 }
diff --git a/js/components/top-nav.js b/js/components/top-nav.js
@@ -82,8 +82,17 @@ class TopNav extends HTMLElement {
 
         hamburgerMenu?.addEventListener('click', (e) => {
             e.stopPropagation();
-            hamburgerMenu.classList.toggle('active');
-            userMenu.classList.toggle('active');
+            const isActive = hamburgerMenu.classList.contains('active');
+
+            // If menu is active (X is showing), clicking should always close it
+            if (isActive) {
+                hamburgerMenu.classList.remove('active');
+                userMenu.classList.remove('active');
+            } else {
+                // Only open if it's not already active
+                hamburgerMenu.classList.add('active');
+                userMenu.classList.add('active');
+            }
         });
 
         // Close menu when clicking outside