[icos] Improve general appearance and add menu delay hover

themes/cp_theme_d10/css/menu.css

@@ -78,6 +78,10 @@
     .menu-level-3 {
       padding-left: 2rem;
     }
+
+    .menu-backdrop {
+      display: none;
+    }
   }
 }
 
@@ -88,25 +92,37 @@
   }
 
   #cp_theme_d10_menu {
-    .top-node:hover .dropdown-menu,
-    .top-node:focus-within .dropdown-menu {
-      display: flex;
-      flex-wrap: none;
-    }
-
     .top-node .dropdown-menu {
+      display: flex;
+      flex-wrap: nowrap;
       left: 0;
-      box-shadow: none;
       width: 100%;
       padding-left: 1rem;
       padding-right: 1rem;
+      background: none;
+      box-shadow: none;
+      border: 0;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-6px);
+      transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
 
       &>div {
         width: 19%;
       }
     }
-  }
 
+    .menu-backdrop {
+      z-index: 8;
+      position: absolute;
+      top: 38.5px;
+      left: 0;
+      width: 100vw;
+      background: white;
+      box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px;
+      transition: height 0.2s ease-in-out;
+    }
+  }
 }
 
 /* Bootstrap XXL breakpoint */
@@ -118,13 +134,6 @@
   }
 
   #cp_theme_d10_menu {
-    .top-node:hover .dropdown-menu,
-    .top-node:focus-within .dropdown-menu {
-      &>div {
-        width: 316px;
-      }
-    }
-
     .top-node .dropdown-menu {
       padding-left: calc((100% - 1400px)/2 + 1rem);
       padding-right: calc((100% - 1400px)/2 + 1rem);

themes/cp_theme_d10/css/page.css

@@ -383,13 +383,16 @@ iframe {
 
 /* "Narrow" pages -- all content narrow (70.5rem) */
 .fluxes_article .page-content,
+.path-webform .page-content,
 .webform #page .page-content,
 .entity-webform-canonical #page .page-content,
 .entity-webform-confirmation #page .page-content,
 .article #page .page-content,
 .cp_event #page .page-content,
 .system-404 .page-content,
 .system-403 .page-content,
+.path-user .page-content,
+.layout-builder-overrides-node-discard-changes .page-content,
 .cp-search-search-results-page #page .page-content {
   max-width: 70.5rem;
   margin-left: auto;
@@ -415,8 +418,7 @@ iframe {
 .node-add-page .page-content,
 .view-data-products-page-1 #page .page-content,
 .fluxes_volume .page-content .block:not(.block-system-main-block),
-.fluxes_volume .page-content .layout--normal,
-.path-user #page .page-content {
+.fluxes_volume .page-content .layout--normal {
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;

themes/cp_theme_d10/js/global.js

@@ -11,17 +11,111 @@
       once('cp_theme_d10', '#cp_theme_d10_menu .top-node .drop-down-toggle').forEach(function (el) {
         el.addEventListener('click', function (event) {
           let target = el.closest(".top-node");
-          target.classList.toggle("open");
+          if (window.innerWidth < 992) {
+            target.classList.toggle("open");
+          }
           event.preventDefault();
         });
         el.addEventListener('keyup', function (event) {
           if(event.key === "Enter") {
             let target = el.closest(".top-node");
-            target.classList.toggle("open");
+            if (window.innerWidth < 992) {
+              target.classList.toggle("open");
+            }
             event.preventDefault();
           }
         });
       });
+      const menuBackdrop = document.querySelector(".menu-backdrop");
+      if (!menuBackdrop) {
+        return;
+      }
+
+      let committedTopNode = null;
+      let dwellTimer = null;
+      let closeTimer = null;
+      let switchTimer = null;
+      const DWELL_TIME = 200;
+      const CLOSE_GRACE = 100;
+      const SWITCH_DELAY = 160;
+
+      function revealDropdown(topNode) {
+        if (committedTopNode !== topNode) { return; }
+        const dropdown = topNode.querySelector(':scope > .dropdown-menu');
+        if (dropdown) {
+          dropdown.style.visibility = 'visible';
+          dropdown.style.opacity = '1';
+          dropdown.style.transform = 'translateY(0)';
+        }
+        const height = (dropdown ? dropdown.offsetHeight : topNode.offsetHeight) + 'px';
+        menuBackdrop.style.height = height;
+      }
+
+      function showDropdown(topNode) {
+        clearTimeout(closeTimer);
+        clearTimeout(switchTimer);
+        const prev = committedTopNode;
+        committedTopNode = topNode;
+        if (prev && prev !== topNode) {
+          hideDropdown(prev);
+          switchTimer = setTimeout(function () { revealDropdown(topNode); }, SWITCH_DELAY);
+        } else {
+          revealDropdown(topNode);
+        }
+      }
+
+      function hideDropdown(topNode) {
+        const dropdown = topNode.querySelector(':scope > .dropdown-menu');
+        if (!dropdown) { return; }
+        dropdown.style.opacity = '';
+        dropdown.style.transform = '';
+        setTimeout(function () { dropdown.style.visibility = ''; }, 200);
+      }
+
+      function closeMenu() {
+        if (committedTopNode) {
+          hideDropdown(committedTopNode);
+          committedTopNode = null;
+        }
+        menuBackdrop.style.height = '0px';
+      }
+
+      once('cp_theme_d10_hover', '#cp_theme_d10_menu .top-node').forEach(function (el) {
+        el.addEventListener('mouseenter', function () {
+          if (window.innerWidth < 992) {
+            return;
+          }
+          clearTimeout(closeTimer);
+          dwellTimer = setTimeout(function () { showDropdown(el); }, DWELL_TIME);
+        });
+
+        el.addEventListener('mouseleave', function () {
+          if (window.innerWidth < 992) {
+            return;
+          }
+          clearTimeout(dwellTimer);
+          closeTimer = setTimeout(closeMenu, CLOSE_GRACE);
+        });
+
+        el.addEventListener('focusin', function () {
+          if (window.innerWidth < 992) {
+            return;
+          }
+          clearTimeout(dwellTimer);
+          clearTimeout(closeTimer);
+          showDropdown(el);
+        });
+
+        el.addEventListener('focusout', function (event) {
+          if (window.innerWidth < 992) {
+            return;
+          }
+          const nextTopNode = event.relatedTarget && event.relatedTarget.closest('#cp_theme_d10_menu .top-node');
+          if (!el.contains(event.relatedTarget) && committedTopNode === el && !nextTopNode) {
+            closeMenu();
+          }
+        });
+      });
       once('cp_theme_d10', '#cp_theme_d10_menu').forEach(function (el) {
         el.addEventListener('mouseout', function (event) {
           if (event.target === document.activeElement) {

themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig

@@ -0,0 +1,13 @@
+{# extends @bootstrap/layout/block.html.twig
+/**
+ * @file
+ * Theme override for tabs.
+ */
+#}
+{% block content %}
+  {% if content %}
+    <nav class="tabs mt-2" role="navigation" aria-label="{{ 'Tabs'|t }}">
+      {{ content }}
+    </nav>
+  {% endif %}
+{% endblock %}

themes/cp_theme_d10/templates/navigation/menu--main.html.twig

@@ -56,7 +56,7 @@
 			<div id="cp_theme_d10_menu" class="layout-container">
 			<div{{ attributes.removeClass('clearfix').addClass('nav navbar-nav justify-content-center px-4')|without('id') }}>
 		{% elseif menu_level == 1 %}
-			<div class="dropdown-menu pt-3 pb-4 border rounded-0 justify-content-between">
+			<div class="dropdown-menu pt-3 pb-4 rounded-0 justify-content-between">
 		{% endif %}
 		{% for item in items %}
 			{% set item_classes = [
@@ -114,11 +114,10 @@
 		{% endfor %}
 		{% if menu_level == 0 %}
 			</div> {# .navbar-nav #}
+			<div class="menu-backdrop" style="height: 0px;"></div>
 			</div> {# #cp_theme_d10_menu #}
 		{% elseif menu_level <= 1 %}
 			</div> {# .dropdown-menu #}
 		{% endif %}
-		{% if menu_level == 0 %}
-		{% endif %}
 	{% endif %}
 {% endmacro %}