124 lines
3.9 KiB
JavaScript
124 lines
3.9 KiB
JavaScript
function getSiteRoot() {
|
|
const path = window.location.pathname.toLowerCase();
|
|
|
|
if (path.includes('/services/') || path.includes('/guides/')) {
|
|
return '../';
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
function renderSiteHeader(root) {
|
|
return `
|
|
<header class="site-header">
|
|
<div class="brand-block">
|
|
<a class="brand" href="${root}index.html">EngineeringBuild</a>
|
|
<div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
|
|
</div>
|
|
|
|
<nav class="site-nav" aria-label="Primary">
|
|
<a href="${root}index.html">Home</a>
|
|
|
|
<div class="nav-group">
|
|
<button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Services</button>
|
|
<div class="nav-panel">
|
|
<a href="${root}services/Network.html">Network Planning</a>
|
|
<a href="${root}services/servers.html">Server Setup</a>
|
|
<a href="${root}services/installation.html">Installation</a>
|
|
<a href="${root}services/survey.html">Site Survey</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-group">
|
|
<button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Guides</button>
|
|
<div class="nav-panel">
|
|
<a href="${root}guides/telecommunications.html">Telecommunications</a>
|
|
<a href="${root}guides/networking.html">Networking</a>
|
|
<a href="${root}guides/linux.html">Linux</a>
|
|
<a href="${root}guides/embedded.html">Embedded</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-group">
|
|
<button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Tools</button>
|
|
<div class="nav-panel">
|
|
<a href="${root}tools.html">Coming soon</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="${root}contact.html">Contact</a>
|
|
</nav>
|
|
</header>
|
|
`;
|
|
}
|
|
|
|
function renderSiteFooter(root) {
|
|
return `
|
|
<footer class="site-footer">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<a class="brand" href="${root}index.html">EngineeringBuild</a>
|
|
<p>Practical telecom, networking, Linux, and self-hosted systems.</p>
|
|
</div>
|
|
<nav class="footer-links" aria-label="Footer">
|
|
<a href="${root}guides/telecommunications.html">Guides</a>
|
|
<a href="${root}services/Network.html">Services</a>
|
|
<a href="${root}tools.html">Tools</a>
|
|
<a href="${root}contact.html">Contact</a>
|
|
</nav>
|
|
<a class="footer-email" href="mailto:info@engineeringbuild.com">info@engineeringbuild.com</a>
|
|
</div>
|
|
</footer>
|
|
`;
|
|
}
|
|
|
|
const siteRoot = getSiteRoot();
|
|
|
|
document.querySelectorAll('[data-include="site-header"]').forEach((target) => {
|
|
target.outerHTML = renderSiteHeader(siteRoot);
|
|
});
|
|
|
|
document.querySelectorAll('[data-include="site-footer"]').forEach((target) => {
|
|
target.outerHTML = renderSiteFooter(siteRoot);
|
|
});
|
|
|
|
const mobileMenuQuery = window.matchMedia('(max-width: 720px)');
|
|
|
|
function closeMobileMenus() {
|
|
document.querySelectorAll('.nav-group.is-open').forEach((group) => {
|
|
group.classList.remove('is-open');
|
|
group.querySelector('.nav-trigger')?.setAttribute('aria-expanded', 'false');
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('.nav-trigger').forEach((trigger) => {
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
|
|
trigger.addEventListener('click', (event) => {
|
|
if (!mobileMenuQuery.matches) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
const group = trigger.closest('.nav-group');
|
|
const isOpen = group.classList.contains('is-open');
|
|
|
|
closeMobileMenus();
|
|
|
|
if (!isOpen) {
|
|
group.classList.add('is-open');
|
|
trigger.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', (event) => {
|
|
if (!mobileMenuQuery.matches || event.target.closest('.site-nav')) {
|
|
return;
|
|
}
|
|
|
|
closeMobileMenus();
|
|
});
|
|
|
|
mobileMenuQuery.addEventListener('change', closeMobileMenus);
|