feat: new dynamic pages in admin panel

static/js/main.js

@@ -65,21 +65,46 @@ function initMegaMenu() {
   const megamenu = productsItem.querySelector('.megamenu');
   if (!trigger || !megamenu) return;
 
+  const CLOSE_DELAY_MS = 150;
   let hideTimer = null;
 
-  function openMenu() {
+  function isPointerInMenu(target) {
+    if (!target || !(target instanceof Node)) return false;
+    return productsItem.contains(target) || megamenu.contains(target);
+  }
+
+  function cancelClose() {
     clearTimeout(hideTimer);
+    hideTimer = null;
+    megamenu.classList.remove('is-closing');
+  }
+
+  function openMenu() {
+    cancelClose();
     productsItem.classList.add('open');
     trigger.setAttribute('aria-expanded', 'true');
   }
 
-  function scheduleClose() {
-    hideTimer = setTimeout(() => {
-      productsItem.classList.remove('open');
-      trigger.setAttribute('aria-expanded', 'false');
-    }, 420);
+  function beginClose() {
+    productsItem.classList.remove('open');
+    trigger.setAttribute('aria-expanded', 'false');
+    megamenu.classList.add('is-closing');
   }
 
+  function scheduleClose(event) {
+    if (event && isPointerInMenu(event.relatedTarget)) return;
+
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(beginClose, CLOSE_DELAY_MS);
+  }
+
+  megamenu.addEventListener('transitionend', (event) => {
+    if (event.target !== megamenu) return;
+    if (event.propertyName !== 'opacity' && event.propertyName !== 'visibility') return;
+    if (productsItem.classList.contains('open')) return;
+    megamenu.classList.remove('is-closing');
+  });
+
   productsItem.addEventListener('mouseenter', openMenu);
   productsItem.addEventListener('mouseleave', scheduleClose);
 
@@ -90,11 +115,17 @@ function initMegaMenu() {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       const isOpen = productsItem.classList.toggle('open');
+      if (isOpen) {
+        openMenu();
+      } else {
+        cancelClose();
+        beginClose();
+      }
       trigger.setAttribute('aria-expanded', String(isOpen));
     }
     if (e.key === 'Escape') {
-      productsItem.classList.remove('open');
-      trigger.setAttribute('aria-expanded', 'false');
+      cancelClose();
+      beginClose();
     }
   });
 }