https://ways2well.com/wp-content/themes/ways2well/js/pages/header-canvas.js?ver=1790228312

1/**
2 * Header canvas — toggles the nav bar's pill between "at rest" (transparent,
3 * Figma opacity 0) and "scrolled" (solid, opacity 1). See sass/pages/header/
4 * _bar.scss's own comment: the two Figma component variants are identical
5 * except for this one opacity value.
6 *
7 * Despite the filename this is now a PRODUCTION dependency, not a review-canvas
8 * script: header.php renders the bar on every page and functions.php enqueues
9 * this sitewide. It also owns the catch-all panel and the whole mobile menu
10 * (burger, overlay, accordion), so removing or relocating it breaks the live
11 * nav, not a preview route. The name is kept because the stylesheet it pairs
12 * with (css/pages/header-canvas.css) is enqueued by the same block, and the
13 * /header-canvas/ review route still uses both.
14 */
15( function () {
16	'use strict';
17
18	var bar = document.querySelector( '.w2w-nav-bar' );
19
20	if ( ! bar ) {
21		return;
22	}
23
24	var THRESHOLD = 40;
25
26	function updateScrolled() {
27		if ( ! bar.classList.contains( 'w2w-nav-bar--menu-open' ) ) {
28			bar.classList.toggle( 'w2w-nav-bar--scrolled', window.scrollY > THRESHOLD );
29		}
30	}
31
32	updateScrolled();
33	window.addEventListener( 'scroll', updateScrolled, { passive: true } );
34
35	// Both .w2w-nav-bar (desktop) and .w2w-nav-mobile (mobile) are
36	// position:fixed, so the page behind an open menu keeps scrolling on
37	// its own — confirmed live: wheel-scrolling with either menu open moves
38	// document.scrollY while the fixed bar never moves, so the page jumps
39	// once the menu closes and the user sees they'd scrolled without
40	// meaning to. Locking body scroll while a menu is open is what a
41	// full-screen overlay needs regardless of framework.
42	function setBodyScrollLocked( locked ) {
43		document.documentElement.style.overflow = locked ? 'hidden' : '';
44	}
45
46	// Catch-all panel toggle — the header switches to its solid "menu open"
47	// base (open-base rect) while the panel is showing, same as Figma's own
48	// "Catch-all open" variant does.
49	var burger = bar.querySelector( '.w2w-nav-bar__burger' );
50
51	if ( burger ) {
52		burger.addEventListener( 'click', function () {
53			var isOpen = bar.classList.toggle( 'w2w-nav-bar--menu-open' );
54			burger.setAttribute( 'aria-expanded', isOpen ? 'true' : 'false' );
55			setBodyScrollLocked( isOpen );
56		} );
57	}
58
59	// Mobile bar: burger opens/closes the full-screen menu.
60	var mobileBar = document.querySelector( '.w2w-nav-mobile' );
61
62	if ( mobileBar ) {
63		var mobileBurger = mobileBar.querySelector( '.w2w-nav-mobile__burger' );
64
65		if ( mobileBurger ) {
66			mobileBurger.addEventListener( 'click', function () {
67				var isOpen = mobileBar.classList.toggle( 'w2w-nav-mobile--menu-open' );
68				mobileBurger.setAttribute( 'aria-expanded', isOpen ? 'true' : 'false' );
69				setBodyScrollLocked( isOpen );
70			} );
71		}
72
73		// Accordion: one category open at a time — matches every Figma
74		// mobile reference frame, which never shows two expanded together.
75		var triggers = mobileBar.querySelectorAll( '.w2w-nav-mobile-accordion__trigger' );
76
77		triggers.forEach( function ( trigger ) {
78			trigger.addEventListener( 'click', function () {
79				var item = trigger.closest( '[data-accordion-item]' );
80				var panel = item.querySelector( '.w2w-nav-mobile-accordion__panel' );
81				var willOpen = panel.hasAttribute( 'hidden' );
82
83				triggers.forEach( function ( otherTrigger ) {
84					var otherItem = otherTrigger.closest( '[data-accordion-item]' );
85					var otherPanel = otherItem.querySelector( '.w2w-nav-mobile-accordion__panel' );
86					otherPanel.setAttribute( 'hidden', '' );
87					otherTrigger.setAttribute( 'aria-expanded', 'false' );
88				} );
89
90				if ( willOpen ) {
91					panel.removeAttribute( 'hidden' );
92					trigger.setAttribute( 'aria-expanded', 'true' );
93				}
94			} );
95		} );
96	}
97} )();