Convert menu to hover-triggered behavior

- Hamburger menu now opens on hover instead of click
- Menu stays open while hovering over button OR menu
- Added 100ms delay to prevent accidental closes
- Submenu opens on pure CSS :hover (no JavaScript)
- Smooth transitions for both main menu and submenu
- Proper ARIA attributes for accessibility
- Legacy click functions kept for backward compatibility
- Menu closes when mouse leaves both button and menu area

templates/index.html

@@ -104,7 +104,7 @@
                 </a>
 
                 <!-- Hamburger Menu Button -->
-                <button class="hamburger-btn" onclick="toggleMenu()" aria-label="Toggle navigation menu">
+                <button class="hamburger-btn" aria-label="Toggle navigation menu">
                     <iconify-icon icon="mdi:menu" width="24" height="24"></iconify-icon>
                 </button>
 
@@ -203,7 +203,7 @@
                 <span>{{if eq .Lang "es"}}Colapsar Todo{{else}}Collapse All{{end}}</span>
             </a>
             <div class="menu-item-submenu">
-                <a href="#" class="menu-item has-submenu" onclick="toggleSubmenu(event)">
+                <a href="#" class="menu-item has-submenu">
                     <iconify-icon icon="mdi:menu" width="20" height="20"></iconify-icon>
                     <span>{{if eq .Lang "es"}}Secciones CV{{else}}CV Sections{{end}}</span>
                     <iconify-icon icon="mdi:chevron-down" width="16" height="16" class="submenu-arrow"></iconify-icon>
@@ -339,7 +339,35 @@
     </div>
 
     <script>
-        // Toggle navigation menu
+        // Hover-based menu control
+        document.addEventListener('DOMContentLoaded', function() {
+            const hamburgerBtn = document.querySelector('.hamburger-btn');
+            const menu = document.getElementById('navigation-menu');
+
+            // Show menu on hamburger hover
+            hamburgerBtn.addEventListener('mouseenter', function() {
+                menu.classList.add('menu-hover');
+                hamburgerBtn.setAttribute('aria-expanded', 'true');
+            });
+
+            // Hide menu when leaving hamburger (only if not hovering menu)
+            hamburgerBtn.addEventListener('mouseleave', function() {
+                setTimeout(() => {
+                    if (!menu.matches(':hover')) {
+                        menu.classList.remove('menu-hover');
+                        hamburgerBtn.setAttribute('aria-expanded', 'false');
+                    }
+                }, 100);
+            });
+
+            // Hide menu when leaving menu itself
+            menu.addEventListener('mouseleave', function() {
+                menu.classList.remove('menu-hover');
+                hamburgerBtn.setAttribute('aria-expanded', 'false');
+            });
+        });
+
+        // Legacy toggle function - kept for compatibility
         function toggleMenu() {
             const menu = document.getElementById('navigation-menu');
             const btn = document.querySelector('.hamburger-btn');
@@ -374,7 +402,7 @@
             });
         }
 
-        // Toggle submenu
+        // Toggle submenu - no longer needed for hover, but kept for compatibility
         function toggleSubmenu(event) {
             event.preventDefault();
             const submenuContainer = event.currentTarget.parentElement;
@@ -416,7 +444,7 @@
             }
         }
 
-        // Close menu when clicking outside
+        // Close menu when clicking outside (only for legacy click-opened menus)
         document.addEventListener('click', function(event) {
             const menu = document.getElementById('navigation-menu');
             const btn = document.querySelector('.hamburger-btn');