From 431a6aae7a9aaf1eb8a9b730a7c6a9091e7cebd8 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 9 Nov 2025 20:05:24 +0000
Subject: [PATCH] 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
---
 static/css/main.css  | 33 +++++++++++++++++++++++++++++++--
 templates/index.html | 38 +++++++++++++++++++++++++++++++++-----
 2 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 0898796..a3ede60 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2036,10 +2036,20 @@ a:focus {
     transition: transform 0.3s ease-in-out;
     overflow-y: auto;
     z-index: 99;
+    pointer-events: none; /* Disable pointer events when hidden */
 }
 
+/* Show menu when hovering menu itself OR when it has the hover class */
+.navigation-menu:hover,
+.navigation-menu.menu-hover {
+    transform: translateX(0);
+    pointer-events: auto; /* Enable pointer events when visible */
+}
+
+/* Legacy class for JS compatibility - keep for backward compatibility */
 .navigation-menu.menu-open {
     transform: translateX(0);
+    pointer-events: auto;
 }
 
 .menu-content {
@@ -2084,7 +2094,7 @@ a:focus {
 
 /* Remove extra padding - all menu items should align consistently */
 
-/* Submenu styles */
+/* Submenu styles - hover triggered */
 .menu-item-submenu {
     position: relative;
 }
@@ -2098,17 +2108,36 @@ a:focus {
     transition: transform 0.2s ease;
 }
 
-.menu-item-submenu.submenu-open .submenu-arrow {
+/* Show submenu on hover */
+.menu-item-submenu:hover .submenu-arrow {
     transform: rotate(180deg);
 }
 
 .submenu-content {
     display: none;
     background-color: rgba(0, 0, 0, 0.02);
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.3s ease, opacity 0.2s ease;
+}
+
+/* Show submenu when hovering the submenu container */
+.menu-item-submenu:hover .submenu-content {
+    display: block;
+    max-height: 600px;
+    opacity: 1;
+}
+
+/* Legacy class for JS compatibility */
+.menu-item-submenu.submenu-open .submenu-arrow {
+    transform: rotate(180deg);
 }
 
 .menu-item-submenu.submenu-open .submenu-content {
     display: block;
+    max-height: 600px;
+    opacity: 1;
 }
 
 .submenu-content .menu-item {
diff --git a/templates/index.html b/templates/index.html
index ec7fa0f..152ee77 100644
--- a/templates/index.html
+++ b/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');