Apply the megamenu feedback round (develop)

.gitignore

@@ -419,3 +419,6 @@ $RECYCLE.BIN/
 # .pnp.*
 
 # End of https://www.toptal.com/developers/gitignore/api/macos,linux,windows,node,yarn,composer,phpstorm+all,visualstudiocode,sublimetext
+
+# local browser-test artifacts
+.playwright-mcp/

themes/osi/assets/js/build/theme.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '37ad048f908f1e2ac736');
+<?php return array('dependencies' => array(), 'version' => '0bfa516281fef59f8671');

themes/osi/assets/js/src/theme/mobile-menu-toggle.js

@@ -20,6 +20,31 @@ License: GPLv2
 // toggle buttons are inserted as siblings of the links: a <button> inside an <a> is invalid markup
 (function($) {
 
+	function toggleSubmenu($button) {
+		var $item    = $button.closest('.menu-item-has-children');
+		var $submenu = $button.siblings('.sub-menu').first();
+		var opening  = $submenu.hasClass('menu-collapse');
+
+		// accordion: opening an item closes its open siblings at the same level
+		if (opening) {
+			$item.siblings('.tab-active').each(function() {
+				toggleSubmenu($(this).children('.menu-toggle').first());
+			});
+		}
+
+		$submenu.toggleClass('menu-collapse', !opening);
+		$item.toggleClass('tab-active', opening);
+		$item.parent().closest('.sub-menu').toggleClass('can-overflow', opening);
+		if (!opening) {
+			$item.find('.sub-menu').addClass('menu-collapse').removeClass('can-overflow');
+			$item.find('.tab-active').removeClass('tab-active');
+			$item.find('.menu-toggle').removeClass('menu-toggle-active').attr('aria-expanded', 'false');
+			$item.find('a[aria-expanded]').attr('aria-expanded', 'false');
+		}
+		$button.toggleClass('menu-toggle-active', opening).attr('aria-expanded', String(opening));
+		$button.siblings('a[aria-expanded]').first().attr('aria-expanded', String(opening));
+	}
+
 	$('.sub-menu').addClass('menu-collapse');
 	$('.menu-item-has-children > a').each(function( index ) {
 		var $link    = $(this);
@@ -31,34 +56,30 @@ License: GPLv2
 
 		var id = $submenu.attr('id') || 'osi-submenu-' + index;
 		$submenu.attr('id', id);
-		$('<button class="menu-toggle"></button>')
+		var $button = $('<button class="menu-toggle"></button>')
 			.attr({
 				'aria-label': 'Toggle submenu for ' + $link.text().trim(),
 				'aria-expanded': 'false',
 				'aria-controls': id
 			})
 			.insertAfter($link);
+
+		// the mobile menu's whole row is the disclosure: the link toggles instead of
+		// navigating, and the caret stays a visual/tap affordance outside the tab order
+		if ($link.closest('.nav-mobile--menu').length) {
+			$link.attr('aria-expanded', 'false');
+			$button.attr({ 'aria-hidden': 'true', tabindex: '-1' });
+			$link.on('click', function(e) {
+				e.preventDefault();
+				toggleSubmenu($button);
+			});
+		}
 	});
 
 	$('.menu-toggle').on('click', function(e) {
-
 		e.preventDefault();
 		e.stopPropagation();
-
-		var $button  = $(this);
-		var $item    = $button.closest('.menu-item-has-children');
-		var $submenu = $button.siblings('.sub-menu').first();
-		var opening  = $submenu.hasClass('menu-collapse');
-
-		$submenu.toggleClass('menu-collapse', !opening);
-		$item.toggleClass('tab-active', opening);
-		$item.parent().closest('.sub-menu').toggleClass('can-overflow', opening);
-		if (!opening) {
-			$item.find('.sub-menu').addClass('menu-collapse').removeClass('can-overflow');
-			$item.find('.tab-active').removeClass('tab-active');
-			$item.find('.menu-toggle').removeClass('menu-toggle-active').attr('aria-expanded', 'false');
-		}
-		$button.toggleClass('menu-toggle-active', opening).attr('aria-expanded', String(opening));
+		toggleSubmenu($(this));
 	});
 
 })( jQuery );

themes/osi/assets/js/src/theme/sidebar-nav.js

@@ -5,18 +5,6 @@
   var closeBtn = document.getElementById('closeSidebar');
   var sidebarBtn = document.getElementById('openSidebar');
 
-// Media Queries
-  var mediaQuerySmall = '48.9em';
-  var mediaQueryLarge = '62em';
-
-// Selectors
-  var navMain = '.nav-main';
-  var sidebarContent = '.content--sidebar';
-  var sidebarWidget = '.content--sidebar .widget';
-
-// For debounce
-  var timer;
-
 // General Menu Button Actions
   function openCloseMenu() {
       var htmlEl = document.querySelectorAll('html')[0];
@@ -69,47 +57,3 @@ if(closeBtn != null) {
 }
 
 
-// PAGE STATE CHANGE FUNCTIONS //
-
-// Change Nav Height on Mobile
-  function navHeight() {
-      var heights = window.innerHeight;
-      var mq = window.matchMedia( '(max-width: ' + mediaQuerySmall + ')' );
-
-      document.addEventListener('DOMContentLoaded', function() {
-          if (mq.matches) {
-            document.querySelectorAll(navMain)[0].style.height = heights -50 + "px";
-          }
-      }, false);
-
-      mq.addListener(function(changed) {
-          if(changed.matches) {
-              document.querySelectorAll(navMain)[0].style.height = heights -50 + "px";
-          } else {
-              document.querySelectorAll(navMain)[0].style.height = null;
-          }
-      });
-  }
-
-
-
-// RUN ON PAGE LOAD //
-
-navHeight(); // set nav height
-
-document.addEventListener('DOMContentLoaded', function() {
-  navHeight();
-}, false);
-
-
-
-// RUN ON PAGE RESIZE //
-
-// debounce for nav
-function onResizeNav() {
-  clearTimeout(timer);
-  timer = setTimeout(function() {
-      navHeight();
-  }, 100);
-}
-window.onresize = onResizeNav;

themes/osi/assets/js/src/theme/theme.js

@@ -2,7 +2,6 @@ import './block-styles.js';
 import './header-resize.js';
 import './mobile-menu-toggle.js';
 import './mega-menu.js';
-import './navigation.js';
 import './sortable-table.js';
 import './toggle-sections.js';
 import './license-filters.js';

themes/osi/assets/scss/_1_settings.breakpoints.scss

@@ -41,7 +41,11 @@ $boxedMax: 1180px; // duplicates var(--wp--custom--layout--wide-size)
 $wideMax: 1440px;
 
 // padding values
+$wrapperPad: 5vw; // duplicates the production Customizer CSS inset on body > .wrapper
 $maxPadding: 48px; // duplicates var(--wp--custom--spacing--max-padding)
+
+// header dimensions
+$headerInnerHeight: 125px; // .header--inner fixed height; admin-bar offsets come from core's --wp-admin--admin-bar--height
 $midPadding: 32px; // duplicates var(--wp--custom--spacing--mid-padding);
 $smallPadding: 16px; // duplicates var(--wp--custom--spacing--small-padding);
 

themes/osi/assets/scss/_1_settings.colors.scss

@@ -40,6 +40,9 @@ $Nwhite: var(--wp--preset--color--neutral-white); //#fff
 $bodyColor: $Nwhite;
 $sidebarColor: $Nlightest;
 
+// Megamenu (menu-only value, deliberately not in the editor palette)
+$megamenuExpandedBgColor: #f9fbf8;
+
 // Text
 $textColor: var(--wp--custom--typography--body--color);
 $headingColor: var(--wp--custom--typography--heading--color);

themes/osi/assets/scss/_5_objects.structure.scss

@@ -8,6 +8,11 @@ body>.wrapper {
     position: relative;
     @include multi-transition('margin-left .2s ease-out, margin-right .2s ease-out, left .2s ease-out');
     z-index: 1;
+    // horizontal inset matching the production Customizer CSS rule (retire that copy at deploy)
+    @media only screen and (min-width: #{$break-nav}) {
+        padding-left: $wrapperPad;
+        padding-right: $wrapperPad;
+    }
     &:after {
         content: '';
         background-color: $Nlightest;

themes/osi/assets/scss/_6_components.header.scss

@@ -24,7 +24,7 @@
         opacity: 1;
         transition: all .3s;
         z-index: 999;
-        height: 125px;
+        height: $headerInnerHeight;
         display: flex;
         align-items: center;
         @media only screen and ( max-width: 1200px) {
@@ -158,32 +158,32 @@
         clear: right;
         padding: 0;
     }
-    // white header while a panel is open; on .header--inner because a stacking-
-    // context root's own background paints below its negative-z ::before dim.
-    // Kept as separate rules: an unparseable :has() would drop the JS fallback
-    .header-main.is-nav-open .header--inner {
-        background-color: $Nwhite;
+    // open-panel layers: full-bleed white veil (::after escapes the wrapper inset) and
+    // page dim; z-index -1 keeps both under content, tree order paints veil over dim
+    @mixin nav-open-layers {
+        &::after {
+            background-color: $Nwhite;
+            border-bottom: 1px solid $Nlight;
+            content: '';
+            inset: 0 (-$wrapperPad);
+            position: absolute;
+            z-index: -1;
+        }
+        &::before {
+            background: rgba(0, 0, 0, .35);
+            content: '';
+            inset: 0;
+            pointer-events: none;
+            position: fixed;
+            z-index: -1;
+        }
     }
-    .header-main:has(.menu-item.megamenu:hover) .header--inner {
-        background-color: $Nwhite;
+    // kept as separate rules (no @extend): an unparseable :has() would drop the JS fallback
+    .header-main.is-nav-open {
+        @include nav-open-layers;
     }
-    // page dim behind an open panel: z-index -1 inside the header's stacking
-    // context paints above page content but below the header and panel
-    .header-main.is-nav-open::before {
-        background: rgba(0, 0, 0, .35);
-        content: '';
-        inset: 0;
-        pointer-events: none;
-        position: fixed;
-        z-index: -1;
-    }
-    .header-main:has(.menu-item.megamenu:hover)::before {
-        background: rgba(0, 0, 0, .35);
-        content: '';
-        inset: 0;
-        pointer-events: none;
-        position: fixed;
-        z-index: -1;
+    .header-main:has(.menu-item.megamenu:hover) {
+        @include nav-open-layers;
     }
     .header-main-small {
         background-color: $Nwhite;