https://lightprotocol.com/js/nav.js?v=3

1var ACQUISITION_ANNOUNCEMENT_URL = 'https://www.helius.dev/blog/light-protocol-acquisition';
2
3function getBannerHtml() {
4    return '' +
5        '<div class="site-banner" role="status">' +
6            '<a href="' + ACQUISITION_ANNOUNCEMENT_URL + '" target="_blank" rel="noopener noreferrer" class="site-banner-link">' +
7                '<span class="site-banner-text">Light is joining Helius.</span>' +
8                '<span class="site-banner-cta">Read the announcement<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" d="M4.5 2h5v5M9.5 2L2.5 9M9.5 2H6.5M9.5 2v3"/></svg></span>' +
9            '</a>' +
10        '</div>';
11}
12
13function ensureSiteTop() {
14    var header = document.querySelector('header');
15    if (!header || !header.parentNode) {
16        return null;
17    }
18
19    var siteTop = header.closest('.site-top');
20    if (!siteTop) {
21        siteTop = document.createElement('div');
22        siteTop.className = 'site-top';
23        header.parentNode.insertBefore(siteTop, header);
24        siteTop.appendChild(header);
25    }
26
27    if (!siteTop.querySelector('.site-banner')) {
28        siteTop.insertAdjacentHTML('afterbegin', getBannerHtml());
29    }
30
31    return siteTop;
32}
33
34function initSiteChrome() {
35    var siteTop = ensureSiteTop();
36    if (!siteTop) {
37        return;
38    }
39
40    document.body.classList.add('has-site-banner');
41
42    if (document.body.classList.contains('page-home') || document.querySelector('.hero-group')) {
43        document.body.classList.add('page-home');
44    }
45
46    syncSiteTopHeight();
47    window.addEventListener('resize', syncSiteTopHeight);
48}
49
50function syncSiteTopHeight() {
51    var siteTop = document.querySelector('.site-top');
52    if (!siteTop) {
53        return;
54    }
55    document.documentElement.style.setProperty('--site-top-height', siteTop.offsetHeight + 'px');
56}
57
58function initNavbar(basePath) {
59    initSiteChrome();
60
61    // Add SVG glass distortion filter (once)
62    if (!document.getElementById('glass-distortion')) {
63        var svgFilter = document.createElement('div');
64        svgFilter.innerHTML = '<svg width="0" height="0" style="position:absolute"><defs><filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.001 0.001" numOctaves="2" seed="92" result="noise"/><feGaussianBlur in="noise" stdDeviation="2" result="blurred"/><feDisplacementMap in="SourceGraphic" in2="blurred" scale="150" xChannelSelector="R" yChannelSelector="G"/></filter></defs></svg>';
65        document.body.insertBefore(svgFilter.firstElementChild, document.body.firstChild);
66    }
67
68    var header = document.querySelector('.site-top header') || document.querySelector('header');
69    header.innerHTML = '' +
70    '<div class="header-left">' +
71        '<a href="' + basePath + 'index.html"><img src="' + basePath + 'lighticon.svg" alt="Light Protocol" class="logo" id="logo"></a>' +
72    '</div>' +
73    '<div class="header-nav">' +
74        '<nav>' +
75            '<div class="nav-item">' +
76                '<span class="dropdown-trigger">Products<svg class="dropdown-chevron" width="8" height="5" viewBox="0 0 8 5" aria-hidden="true"><polyline points="1 1 4 4 7 1"></polyline></svg></span>' +
77                '<div class="dropdown-menu">' +
78                    '<a href="https://www.zkcompression.com/compressed-tokens/overview" target="_blank" class="dropdown-item">Payments Tooling</a>' +
79                    '<a href="https://www.zkcompression.com/compressed-pdas/overview" target="_blank" class="dropdown-item">PDA Accounts</a>' +
80                    '<a href="https://www.zkcompression.com/zk/overview" target="_blank" class="dropdown-item">ZK Primitives</a>' +
81                '</div>' +
82            '</div>' +
83            '<a href="https://www.zkcompression.com" target="_blank">Docs</a>' +
84            '<a href="' + basePath + 'about/">Company</a>' +
85            '<a href="' + basePath + 'contact/">Contact</a>' +
86        '</nav>' +
87    '</div>' +
88    '<div class="header-right">' +
89        '<a href="https://www.zkcompression.com/welcome" target="_blank" class="nav-cta">' +
90            '<span>Start Building</span>' +

91            '<svg width="13" height="10" viewBox="0 0 13 10"><path d="M1,5 L11,5"></path><polyline points="8 1 12 5 8 9"></polyline></svg>' +
92        '</a>' +
93    '</div>';
94
95    // Dropdown handling
96    var navItems = document.querySelectorAll('.nav-item');
97    navItems.forEach(function(item) {
98        var trigger = item.querySelector('.dropdown-trigger');
99        trigger.addEventListener('click', function(e) {
100            e.preventDefault();
101            e.stopPropagation();
102            var isActive = item.classList.contains('active');
103            navItems.forEach(function(i) { i.classList.remove('active'); });
104            if (!isActive) { item.classList.add('active'); }
105        });
106    });
107
108    document.addEventListener('click', function(e) {
109        if (!e.target.closest('.nav-item')) {
110            navItems.forEach(function(item) { item.classList.remove('active'); });
111        }
112    });
113
114    document.addEventListener('keydown', function(e) {
115        if (e.key === 'Escape') {
116            navItems.forEach(function(item) { item.classList.remove('active'); });
117        }
118    });
119
120    // Set persistent active state based on current page
121    var currentPath = window.location.pathname;
122    var navDirectLinks = header.querySelectorAll('nav > a');
123    navDirectLinks.forEach(function(link) {
124        var href = link.getAttribute('href');
125        if (!href) return;
126        var normalized = '/' + href.replace(basePath, '').replace('index.html', '');
127        if (normalized !== '/' && currentPath.indexOf(normalized) !== -1) {
128            link.classList.add('page-active');
129        }
130    });
131
132    var dropdownLinks = header.querySelectorAll('.dropdown-item');
133    dropdownLinks.forEach(function(item) {
134        var href = item.getAttribute('href');
135        if (!href || href.startsWith('http')) return;
136        var normalized = '/' + href.replace(basePath, '');
137        if (currentPath.indexOf(normalized) !== -1) {
138            item.closest('.nav-item').classList.add('page-active');
139        }
140    });
141
142    syncSiteTopHeight();
143}
144
145function initFooter(basePath) {
146    var footer = document.createElement('footer');
147    footer.innerHTML = '' +
148    '<div class="footer-inner">' +
149        '<div class="footer-left">' +
150            '<img src="' + basePath + 'wordmark-blue.svg" alt="Light Protocol" class="footer-logo">' +
151            '<span>&copy; 2026 Light Protocol</span>' +
152        '</div>' +
153        '<div class="footer-right">' +
154            '<div class="footer-col">' +
155                '<h4>Company</h4>' +
156                '<a href="' + basePath + 'about/">About</a>' +
157                '<a href="https://github.com/Lightprotocol/brand-assets" target="_blank">Brand Assets</a>' +
158                '<a href="mailto:[email protected]">Contact</a>' +
159            '</div>' +
160            '<div class="footer-col">' +
161                '<h4>Developers</h4>' +
162                '<a href="https://www.zkcompression.com" target="_blank">Docs</a>' +
163                '<a href="https://github.com/Lightprotocol/examples-light-token" target="_blank">Examples</a>' +
164                '<a href="https://github.com/Lightprotocol/skills" target="_blank">AI Agent Skills</a>' +
165                '<a href="https://github.com/Lightprotocol/light-protocol/releases" target="_blank">Changelog</a>' +
166                '<a href="https://www.zkcompression.com/support" target="_blank">Support</a>' +
167            '</div>' +
168            '<div class="footer-col">' +
169                '<h4>Products</h4>' +
170                '<a href="https://www.zkcompression.com/compressed-tokens/overview" target="_blank">Payments Tooling</a>' +
171                '<a href="https://www.zkcompression.com/compressed-pdas/overview" target="_blank">PDA Accounts</a>' +
172                '<a href="https://www.zkcompression.com/zk/overview" target="_blank">ZK Primitives</a>' +
173            '</div>' +
174            '<div class="footer-col">' +
175                '<h4>Socials</h4>' +
176                '<a href="https://x.com/LightProtocol" target="_blank">X</a>' +
177                '<a href="https://discord.gg/rpddh53TeG" target="_blank">Discord</a>' +
178                '<a href="https://github.com/Lightprotocol/light-protocol" target="_blank">GitHub</a>' +
179            '</div>' +
180        '</div>' +
181    '</div>';
182    document.body.appendChild(footer);
183}