fixed toolbar menu

resources/js/nova.js

@@ -101,13 +101,47 @@
 
   document.addEventListener('click', function (e) {
     var dropdownToggle = closest(e.target, '[data-dropdown-toggle]');
+    // legacy shorthand toggles: data-dd="name" -> menu id = dd-name
+    var legacyToggle = closest(e.target, '[data-dd]');
     if (dropdownToggle) {
+      // On pointer/hover-capable devices prefer hover; ignore mouse clicks
+      if (canHover() && e.detail > 0) {
+        // allow keyboard activation (e.detail === 0) to fall through
+        return;
+      }
       e.preventDefault();
       var dropdown = closest(dropdownToggle, '[data-dropdown]');
       if (dropdown) toggleDropdown(dropdown);
       return;
     }
 
+    if (legacyToggle) {
+      // On pointer/hover-capable devices prefer hover; ignore mouse clicks
+      if (canHover() && e.detail > 0) {
+        return;
+      }
+      e.preventDefault();
+      var ddName = legacyToggle.getAttribute('data-dd');
+      if (!ddName) return;
+      var menu = document.getElementById('dd-' + ddName);
+      if (!menu) return;
+
+      // treat this pair (toggle + menu) similarly to our dropdown API
+      var isOpen = !menu.classList.contains('hidden');
+      // close other dropdowns
+      closeAllDropdowns();
+
+      if (isOpen) {
+        menu.classList.add('hidden');
+        setExpanded(legacyToggle, false);
+      } else {
+        menu.classList.remove('hidden');
+        setExpanded(legacyToggle, true);
+      }
+
+      return;
+    }
+
     var mobileToggle = closest(e.target, '[data-mobile-toggle]');
     if (mobileToggle) {
       e.preventDefault();
@@ -171,11 +205,50 @@
     hoverCloseTimers.set(
       dropdown,
       window.setTimeout(function () {
-        closeDropdown(dropdown);
+        closeMenuElement(dropdown);
       }, 140)
     );
   }
 
+  // Close a menu element or its parent dropdown wrapper.
+  function closeMenuElement(el) {
+    if (!el) return;
+
+    // If this is a dropdown wrapper, find the menu inside
+    if (el.hasAttribute && el.hasAttribute('data-dropdown')) {
+      var menu = el.querySelector('[data-dropdown-menu]');
+      var toggle = el.querySelector('[data-dropdown-toggle]');
+      if (menu) menu.classList.add('hidden');
+      setExpanded(toggle, false);
+      // also close submenus inside
+      el.querySelectorAll('[data-submenu-menu]').forEach(function (sm) {
+        sm.classList.add('hidden');
+      });
+      el.querySelectorAll('[data-submenu-toggle]').forEach(function (st) {
+        setExpanded(st, false);
+      });
+      return;
+    }
+
+    // If it's a menu element (e.g., legacy id=dd-name) hide it and try to find its toggle
+    var menuEl = el;
+    if (!menuEl.id && el.getAttribute && el.getAttribute('data-dropdown-menu')) {
+      // explicit menu element
+    }
+
+    // hide the element if possible
+    try { menuEl.classList.add('hidden'); } catch (e) {}
+
+    // Try to map back to a toggle: id like dd-name -> data-dd="name"
+    if (menuEl.id && menuEl.id.indexOf('dd-') === 0) {
+      var name = menuEl.id.slice(3);
+      var toggle = document.querySelector('[data-dd="' + name + '"]');
+      if (toggle) setExpanded(toggle, false);
+    } else {
+      // fallback: if menu is inside a [data-dropdown], handled above; nothing more to do
+    }
+  }
+
   function bindHoverHandlers() {
     if (!canHover()) return;
     document.querySelectorAll('[data-dropdown]').forEach(function (dropdown) {
@@ -187,6 +260,30 @@
         scheduleClose(dropdown);
       });
     });
+
+    // legacy hover binding for shorthand toggles (data-dd)
+    document.querySelectorAll('[data-dd]').forEach(function (el) {
+      var ddName = el.getAttribute('data-dd');
+      if (!ddName) return;
+      var menu = document.getElementById('dd-' + ddName);
+      if (!menu) return;
+
+      // when pointer enters either toggle or menu, open
+      function enter() {
+        clearHoverTimer(menu);
+        menu.classList.remove('hidden');
+        setExpanded(el, true);
+      }
+
+      function leave() {
+        scheduleClose(menu);
+      }
+
+      el.addEventListener('mouseenter', enter);
+      el.addEventListener('mouseleave', leave);
+      menu.addEventListener('mouseenter', enter);
+      menu.addEventListener('mouseleave', leave);
+    });
   }
 
   bindHoverHandlers();