https://www.payoneer.com/developers-docs/js/platform-nav.js?v=3

1/**
2 * Payoneer Platform single-row navigation — replaces mega-menu when platform theme is active.
3 */
4(function () {
5	"use strict";
6
7	var NAV_ID = "ppl-platform-nav";
8	var CHEVRON =
9		'<svg class="ppl-platform-nav__chevron" viewBox="0 0 9 5" aria-hidden="true" focusable="false"><path d="M.75 1L4.5 4.25L8.25 1" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>';
10	function updateHeaderHeight() {
11		var header = document.querySelector("#masthead.site-header");
12		if (header) {
13			document.documentElement.style.setProperty("--payo-header-h", header.offsetHeight + "px");
14		}
15		if (typeof window.PayoneerSetDocHeaderLayout === "function") {
16			window.PayoneerSetDocHeaderLayout();
17		}
18	}
19
20	function bindHeaderResize() {
21		if (window.PayoneerPlatformNav._resizeBound) {
22			return;
23		}
24		window.PayoneerPlatformNav._resizeBound = true;
25		window.addEventListener("resize", updateHeaderHeight);
26		if (document.fonts && document.fonts.ready) {
27			document.fonts.ready.then(updateHeaderHeight);
28		}
29		if (document.readyState === "complete") {
30			updateHeaderHeight();
31		} else {
32			window.addEventListener("load", updateHeaderHeight);
33		}
34	}
35
36	function isDeveloperDocsPage() {
37		return document.body.classList.contains("developer-docs-page");
38	}
39
40	function docsSearchCenterMarkup() {
41		return (
42			'<div class="ppl-platform-nav__center ppl-platform-nav__center--search">' +
43			'<div class="ppl-platform-nav__search">' +
44			'<input type="search" id="ppl-platform-nav-search" class="ppl-platform-nav__search-input developer-docs-header-search-input" placeholder="Search" aria-label="Search documentation" autocomplete="off" spellcheck="false">' +
45			"</div>" +
46			"</div>"
47		);
48	}
49
50	function primaryMenuMarkup() {
51		return (
52			'<nav class="ppl-platform-nav__center" aria-label="Primary navigation">' +
53			'<ul class="ppl-platform-nav__menu">' +
54			'<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="/developers-docs/">Products' +
55			CHEVRON +
56			"</a></li>" +
57			'<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="/developers-docs/accounts-payable/">Solutions' +
58			CHEVRON +
59			"</a></li>" +
60			'<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="https://www.payoneer.com/about/pricing/">Pricing</a></li>' +
61			'<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="https://www.payoneer.com/resources/">Resources' +
62			CHEVRON +
63			"</a></li>" +
64			'<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="https://www.payoneer.com/about/">About' +
65			CHEVRON +
66			"</a></li>" +
67			"</ul>" +
68			"</nav>"
69		);
70	}
71
72	function navMarkup() {
73		return (
74			'<div class="ppl-platform-nav__inner">' +
75			'<div class="ppl-platform-nav__brand">' +
76			'<a href="https://www.payoneer.com/" rel="home">' +
77			'<img src="https://www.payoneer.com/wp-content/themes/payo/assets/img/payoneer-dark-logo.svg" width="148" height="30" alt="Payoneer">' +
78			"</a>" +
79			"</div>" +
80			(isDeveloperDocsPage() ? docsSearchCenterMarkup() : primaryMenuMarkup()) +
81			'<div class="ppl-platform-nav__actions">' +
82			'<div class="ppl-platform-nav__action-group">' +
83			'<a class="ppl-platform-nav__signin" href="https://myaccount.payoneer.com/" rel="noopener" target="_blank">Sign in</a>' +
84			'<a class="ppl-platform-nav__cta" href="https://www.payoneer.com/go/">Get started</a>' +
85			"</div></div>" +
86			"</div>"
87		);
88	}
89
90	function mount() {
91		var masthead = document.getElementById("masthead");
92		if (!masthead) {
93			return false;
94		}
95
96		var nav = document.getElementById(NAV_ID);
97		if (!nav) {
98			nav = document.createElement("div");
99			nav.id = NAV_ID;
100			nav.className = "ppl-platform-nav";
101			nav.setAttribute("role", "navigation");
102			nav.setAttribute("aria-label", "Payoneer Platform");
103			masthead.insertBefore(nav, masthead.firstChild);
104		} else if (nav.parentElement !== masthead) {
105			/* Legacy mounts lived inside .bottom-header (now hidden) — hoist to #masthead */
106			masthead.insertBefore(nav, masthead.firstChild);
107		}
108

109		nav.innerHTML = navMarkup();
110		nav.hidden = false;
111		nav.removeAttribute("hidden");
112		updateHeaderHeight();
113		bindHeaderResize();
114		requestAnimationFrame(updateHeaderHeight);
115		if (isDeveloperDocsPage() && typeof window.PayoneerInitDocSidebarSearch === "function") {
116			window.PayoneerInitDocSidebarSearch();
117		}
118		return true;
119	}
120
121	function unmount() {
122		var nav = document.getElementById(NAV_ID);
123		if (nav) {
124			nav.remove();
125		}
126		updateHeaderHeight();
127	}
128
129	function isThemeActive() {
130		return document.documentElement.getAttribute("data-payoneer-platform-theme") === "active";
131	}
132
133	function autoMount() {
134		if (isThemeActive() || isDeveloperDocsPage()) {
135			mount();
136		}
137	}
138
139	window.PayoneerPlatformNav = {
140		mount: mount,
141		unmount: unmount,
142		updateHeaderHeight: updateHeaderHeight,
143		isThemeActive: isThemeActive,
144	};
145
146	document.addEventListener("payoneer-platform-theme-change", function (e) {
147		if ((e.detail && e.detail.active) || isDeveloperDocsPage()) {
148			mount();
149		}
150	});
151
152	if (document.readyState === "loading") {
153		document.addEventListener("DOMContentLoaded", autoMount);
154	} else {
155		autoMount();
156	}
157
158	window.addEventListener("load", autoMount);
159})();