[UX] #577 show VPD submenu below primary navigation

src/main/resources/static/js/app.js

@@ -73,45 +73,39 @@ function syncPolicyTemplate(select) {
   );
 }
 
-function closeMenuGroup(group) {
-  if (!group) {
+function initPersistentMenus() {
+  const productNav = document.querySelector('[data-product-nav]');
+  if (!productNav) {
     return;
   }
-  group.classList.remove('open');
-  group.querySelector('.rw-menu-trigger')?.setAttribute('aria-expanded', 'false');
-}
+  const submenuBar = productNav.querySelector('[data-submenu-bar]');
+  const triggers = Array.from(productNav.querySelectorAll('[data-submenu-trigger]'));
+  const panels = Array.from(productNav.querySelectorAll('[data-submenu-panel]'));
+  const path = window.location.pathname;
 
-function closeAllMenuGroups(exceptGroup = null) {
-  document.querySelectorAll('.rw-menu-group.open').forEach((group) => {
-    if (group !== exceptGroup) {
-      closeMenuGroup(group);
-    }
-  });
-}
-
-function initPersistentMenus() {
-  document.querySelectorAll('.rw-menu-trigger').forEach((button) => {
-    button.addEventListener('click', (event) => {
-      event.stopPropagation();
-      const group = button.closest('.rw-menu-group');
-      if (!group) {
-        return;
-      }
-      const nextOpen = !group.classList.contains('open');
-      closeAllMenuGroups(group);
-      group.classList.toggle('open', nextOpen);
-      button.setAttribute('aria-expanded', String(nextOpen));
+  const activate = (target) => {
+    const hasTarget = panels.some((panel) => panel.dataset.submenuPanel === target);
+    submenuBar.hidden = !hasTarget;
+    triggers.forEach((trigger) => {
+      const active = trigger.dataset.submenuTrigger === target;
+      trigger.classList.toggle('active', active);
+      trigger.setAttribute('aria-expanded', String(active));
     });
-  });
-  document.addEventListener('click', (event) => {
-    if (!event.target.closest('.rw-menu')) {
-      closeAllMenuGroups();
-    }
-  });
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') {
-      closeAllMenuGroups();
-    }
+    panels.forEach((panel) => {
+      panel.hidden = panel.dataset.submenuPanel !== target;
+    });
+  };
+
+  const currentPanel = panels.find((panel) => Array.from(panel.querySelectorAll('a[href]')).some((link) => {
+    const href = new URL(link.href, window.location.origin).pathname;
+    return path === href || (href !== '/' && path.startsWith(`${href}/`));
+  }));
+  if (currentPanel) {
+    activate(currentPanel.dataset.submenuPanel);
+  }
+
+  triggers.forEach((trigger) => {
+    trigger.addEventListener('click', () => activate(trigger.dataset.submenuTrigger));
   });
 }