https://www.finops.org/wp-content/themes/finops-foundation/assets/…?ver=1.1.76217830038531790840168

1(function() {
2	if (document.body.classList.contains('has-global-nav')) return;
3
4	function getDomain(url) {
5		try {
6			const parsedUrl = new URL(url);
7			return parsedUrl.hostname;
8		} catch (e) {
9			console.error('Invalid URL:', url);
10			return null;
11		}
12	}
13
14	let html = '';
15	let navItems = [
16		{
17			'title': 'FinOps',
18			'url': 'https://www.finops.org/'
19		},
20		{
21			'title': 'Tokenomics',
22			'url': 'https://www.tokeneconomics.com/'
23		},
24		{
25			'title': 'ITAM',
26			'url': 'https://www.itamf.org/'
27		},
28		{
29			'title': 'FOCUS',
30			'url': 'https://focus.finops.org'
31		},
32		{
33			'title': 'Tokenomicon + FinOps X',
34			'url': 'https://www.tokenomicon.com'
35		}
36	];
37
38	let current_url = '';
39	navItems.forEach((item) => {
40		if (window.location.href.indexOf(item.url) > -1) {
41			current_url = item.url;
42		}
43	});
44
45	let utm_source = getDomain(window.location.href);
46	let utm_name = 'global-nav';
47	let utm_medium = 'global-nav';
48
49	let nav = '';
50	navItems.map((item) => {
51		let activeClass = '';
52		if (current_url === item.url) {
53			activeClass = 'active';
54		}
55
56		nav += `
57			<li><a class="${activeClass}" href="${item.url}?utm_source=${utm_source}&utm_medium=${utm_medium}&utm_name=${utm_name}">${item.title}</a></li>
58		`;
59	})
60
61	html += `
62	    <style>
63			.global-nav{background:#0f171d;padding:8px 0 8px 0}@media(max-width: 980px){.global-nav{display:none}}.global-nav .container{justify-self:end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:1.5rem;padding-right:1.5rem;margin:0 0 0 auto}.global-nav .container nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none;padding:0;margin:0}.global-nav .container nav ul li{margin:0 0 0 20px}.global-nav .container nav ul li a{font-family:"IBM Plex Sans",sans-serif;font-style:normal;font-weight:500 !important;font-size:14px;line-height:14px;color:rgba(255,255,255,.72);text-decoration:none;padding:6px 8px;display:block;position:relative;-webkit-transition:all .3s ease;transition:all .3s ease}.global-nav .container nav ul li a:hover,.global-nav .container nav ul li a.active{background:rgba(255,255,255,.08);border-radius:8px}
64		</style>
65	    <div class="global-nav">
66	        <div class="container">
67	            <nav>
68	                <ul>
69	                    ${nav}
70	            </nav>
71	        </div>

72	    </div>
73	`;
74
75	// Create the parent element
76	const shadowHost = document.createElement('div');
77	document.body.insertBefore(shadowHost, document.body.firstChild);
78
79	const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
80
81	const shadowContent = document.createElement('div');
82	shadowContent.innerHTML = html;
83
84	shadowRoot.appendChild(shadowContent);
85
86	document.body.classList.add('has-global-nav');
87})();