Remove Alpine.js dependency from menu toggle, use vanilla JavaScript

- Replace Alpine.js directives (@click, x-ref) with vanilla JS
- Update hamburger-menu.html to use id selectors instead of x-ref
- Rewrite menu.js to work without Alpine.js
- Menu now opens/closes on click with proper event handling
- Language toggle now accessible in hamburger menu

Co-Authored-By: Claude Haiku 4.5 <redacted>

diff --git a/i18n/en.yaml b/i18n/en.yaml
new file mode 100644 (file)
index 0000000..cd061c0
--- /dev/null
+++ b/i18n/en.yaml
@@ -0,0 +1,51 @@
+# Navigation & UI
+articles: "Articles"
+about: "About"
+here: "Contact"
+legal: "Privacy"
+language: "Language"
+toggleTheme: "Theme"
+toggleMenu: "Menu"
+closeMenu: "Close"
+email: "Email"
+contact: "Contact"
+links: "Links"
+allRightsReserved: "All rights reserved."
+
+# Articles
+readMore: "Read more"
+published: "Published"
+updated: "Updated"
+readingTime: "reading time"
+min: "min"
+author: "Author"
+category: "Category"
+tags: "Tags"
+relatedPosts: "Related articles"
+noRelated: "No related articles."
+
+# Article types
+life: "Life"
+photo: "Photo"
+link: "Link"
+quote: "Quote"
+tech: "Tech"
+
+# Sharing
+share: "Share"
+shareOn: "Share on"
+copyLink: "Copy link"
+twitter: "Twitter"
+facebook: "Facebook"
+
+# Forms
+name: "Name"
+message: "Message"
+submit: "Send"
+sending: "Sending..."
+success: "Message sent successfully!"
+error: "An error occurred. Please try again."
+
+# Social
+follow: "Follow me"
+contactMe: "Contact me"

diff --git a/i18n/it.yaml b/i18n/it.yaml
new file mode 100644 (file)
index 0000000..92406d9
--- /dev/null
+++ b/i18n/it.yaml
@@ -0,0 +1,51 @@
+# Navigation & UI
+articles: "Articoli"
+about: "Chi Sono"
+here: "Contatti"
+legal: "Privacy"
+language: "Lingua"
+toggleTheme: "Tema"
+toggleMenu: "Menu"
+closeMenu: "Chiudi"
+email: "Email"
+contact: "Contatti"
+links: "Link"
+allRightsReserved: "Tutti i diritti riservati."
+
+# Articles
+readMore: "Leggi di più"
+published: "Pubblicato"
+updated: "Aggiornato"
+readingTime: "tempo di lettura"
+min: "min"
+author: "Autore"
+category: "Categoria"
+tags: "Tag"
+relatedPosts: "Articoli correlati"
+noRelated: "Nessun articolo correlato."
+
+# Article types
+life: "Vita"
+photo: "Foto"
+link: "Link"
+quote: "Citazione"
+tech: "Tech"
+
+# Sharing
+share: "Condividi"
+shareOn: "Condividi su"
+copyLink: "Copia link"
+twitter: "Twitter"
+facebook: "Facebook"
+
+# Forms
+name: "Nome"
+message: "Messaggio"
+submit: "Invia"
+sending: "Invio in corso..."
+success: "Messaggio inviato con successo!"
+error: "Si è verificato un errore. Riprova."
+
+# Social
+follow: "Seguimi"
+contactMe: "Contattami"

diff --git a/themes/danix-xyz-hacker/assets/js/menu.js b/themes/danix-xyz-hacker/assets/js/menu.js
index 257736ba04b6a49ebc6747010b90aca496f4aac2..f61e60b0be59e2c391ad7bfb44a1e6ea89bf83c9 100644 (file)
--- a/themes/danix-xyz-hacker/assets/js/menu.js
+++ b/themes/danix-xyz-hacker/assets/js/menu.js
@@ -1,51 +1,52 @@
 document.addEventListener('DOMContentLoaded', () => {
-  // Get the menu toggle button and overlay
   const menuToggle = document.getElementById('menu-toggle');
   const menuOverlay = document.getElementById('menu-overlay');
+  const menuPanel = document.getElementById('menu-panel');
 
-  /**
-   * Toggle menu visibility and state
-   */
   function toggleMenu() {
-    const overlay = document.getElementById('menu-overlay');
-    const menuPanel = document.querySelector('[x-ref="menuPanel"]');
-
-    if (!overlay || !menuPanel) return;
+    if (!menuOverlay || !menuPanel) return;
 
     // Toggle overlay visibility classes
-    overlay.classList.toggle('opacity-0');
-    overlay.classList.toggle('invisible');
+    menuOverlay.classList.toggle('opacity-0');
+    menuOverlay.classList.toggle('invisible');
 
     // Toggle menu panel translation
     menuPanel.classList.toggle('translate-x-full');
 
     // Control body overflow
-    const isMenuOpen = !overlay.classList.contains('opacity-0');
+    const isMenuOpen = !menuOverlay.classList.contains('opacity-0');
     document.body.style.overflow = isMenuOpen ? 'hidden' : '';
   }
 
+  function closeMenu() {
+    if (!menuOverlay || menuOverlay.classList.contains('opacity-0')) return;
+    toggleMenu();
+  }
+
   // Toggle menu when clicking the hamburger button
   if (menuToggle) {
     menuToggle.addEventListener('click', toggleMenu);
   }
 
-  // Close menu when clicking on the overlay (but not the panel itself)
+  // Close menu when clicking on the overlay
   if (menuOverlay) {
     menuOverlay.addEventListener('click', (e) => {
-      // Only close if clicking the overlay itself, not the menu panel
       if (e.target === menuOverlay) {
-        toggleMenu();
+        closeMenu();
       }
     });
   }
 
+  // Close menu when clicking menu items
+  const menuLinks = document.querySelectorAll('#menu-panel a, #menu-panel button');
+  menuLinks.forEach(link => {
+    link.addEventListener('click', closeMenu);
+  });
+
   // Close menu on Escape key
   document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      const overlay = document.getElementById('menu-overlay');
-      if (overlay && !overlay.classList.contains('opacity-0')) {
-        toggleMenu();
-      }
+    if (e.key === 'Escape' && menuOverlay && !menuOverlay.classList.contains('opacity-0')) {
+      closeMenu();
     }
   });
 });

diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index 6eeddd49365e00e38da271dc73d30715b7817acf..c22981be3791e3f5dd404370029f229ab34d20d9 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -1,12 +1,10 @@
 <div
   id="menu-overlay"
   class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-200 z-40"
-  @click="closeMenu()"
 >
   <div
+    id="menu-panel"
     class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform translate-x-full transition-transform duration-300 z-50"
-    @click.stop
-    x-ref="menuPanel"
   >
     <!-- Close button -->
     <div class="flex items-center justify-between p-6 border-b border-border">