fix: rewrite hamburger menu using Alpine.js event dispatcher

- Replace vanilla JS click handlers with Alpine.js @toggle-menu event
- Hamburger button dispatches toggle-menu event on click
- Menu overlay listens to toggle-menu and toggles menuOpen state
- Alpine controls visibility via :class bindings (opacity/invisible)
- Alpine controls panel slide via :class bindings (translate-x)
- All menu interactions (close button, links, ESC, backdrop) use Alpine
- Remove complex vanilla JS that wasn't working reliably
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 9 insertions, 17 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 36c66d1..ab1f4bb 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1487,23 +1487,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
 
 /* Mobile menu overlay */
 
-.menu-overlay {
-  visibility: hidden;
-  position: fixed;
-  inset: 0px;
-  z-index: 40;
-  background-color: var(--bg);
-  opacity: 0;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-}
-
-article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
-  border-color: var(--border);
-  box-shadow: 0 0 20px var(--accent-glow);
-}
-
 .menu-overlay.active {
   visibility: visible;
   opacity: 1;
@@ -1817,6 +1800,11 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   flex-shrink: 0;
 }
 
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-full {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2163,6 +2151,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   opacity: 0;
 }
 
+.opacity-100 {
+  opacity: 1;
+}
+
 .opacity-5 {
   opacity: 0.05;
 }