feat: new dynamic pages in admin panel

static/css/main.css

@@ -45,6 +45,9 @@
   --spacing-2xl: 7rem;
 
   --navbar-height: 68px;
+  --navbar-expand-duration: 0.85s;
+  --navbar-link-duration: 0.28s;
+  --navbar-expand-ease: cubic-bezier(0.4, 0, 0.1, .9);
   --container-max: 1200px;
   --container-padding: 1.5rem;
 
@@ -378,7 +381,8 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 500;
   color: var(--text-secondary);
   text-decoration: none;
-  transition: var(--transition-fast);
+  transition: color var(--navbar-link-duration) var(--navbar-expand-ease),
+    background var(--navbar-link-duration) var(--navbar-expand-ease);
   white-space: nowrap;
 }
 
@@ -389,7 +393,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .nav-arrow {
-  transition: transform 0.4s ease;
+  transition: transform var(--navbar-expand-duration) var(--navbar-expand-ease);
 }
 
 .nav-item.has-megamenu:hover .nav-arrow,
@@ -427,7 +431,9 @@ h1, h2, h3, h4, h5, h6 {
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
-  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
+  transition: opacity var(--navbar-expand-duration) var(--navbar-expand-ease),
+    visibility var(--navbar-expand-duration) var(--navbar-expand-ease),
+    transform var(--navbar-expand-duration) var(--navbar-expand-ease);
   pointer-events: none;
   z-index: 999;
 }
@@ -440,6 +446,10 @@ h1, h2, h3, h4, h5, h6 {
   pointer-events: auto;
 }
 
+.megamenu.is-closing {
+  pointer-events: auto;
+}
+
 .megamenu-inner {
   max-width: var(--container-max);
   margin: 0 auto;
@@ -522,7 +532,8 @@ h1, h2, h3, h4, h5, h6 {
 .megamenu-sub-chevron {
   flex-shrink: 0;
   color: var(--text-muted);
-  transition: transform 0.4s ease, color 0.4s ease;
+  transition: transform var(--navbar-expand-duration) var(--navbar-expand-ease),
+    color var(--navbar-expand-duration) var(--navbar-expand-ease);
 }
 
 .megamenu-product-item.has-subproducts:hover .megamenu-sub-chevron,
@@ -549,7 +560,9 @@ h1, h2, h3, h4, h5, h6 {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
-  transition: max-height 0.4s ease, opacity 0.35s ease, border-color 0.35s ease;
+  transition: max-height var(--navbar-expand-duration) var(--navbar-expand-ease),
+    opacity var(--navbar-expand-duration) var(--navbar-expand-ease),
+    border-color var(--navbar-expand-duration) var(--navbar-expand-ease);
 }
 
 .megamenu-product-item.has-subproducts:hover .megamenu-sublist,
@@ -2853,7 +2866,8 @@ a.citation-count-badge:hover {
     padding: 1rem var(--container-padding) 1.5rem;
     max-height: 0;
     overflow: hidden;
-    transition: max-height 0.35s ease, padding 0.35s ease;
+    transition: max-height var(--navbar-expand-duration) var(--navbar-expand-ease),
+      padding var(--navbar-expand-duration) var(--navbar-expand-ease);
   }
 
   .navbar-menu.open {

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();
     }
   });
 }