engineeringbuild-website/main.js

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-link" href="${root}index.html">
          <img class="brand-image" src="${root}img/Header%20image.png" alt="" />
        </a>
      </div>

      <button class="menu-toggle" type="button" aria-expanded="false" aria-label="Open menu">
        <span></span>
        <span></span>
        <span></span>
      </button>

      <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)');

document.querySelectorAll('.menu-toggle').forEach((toggle) => {
  const header = toggle.closest('.site-header');
  const nav = header?.querySelector('.site-nav');

  toggle.addEventListener('click', () => {
    const isOpen = nav.classList.toggle('is-open');
    toggle.setAttribute('aria-expanded', String(isOpen));
    toggle.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');

    if (!isOpen) {
      closeMobileMenus();
    }
  });
});

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-header')) {
    return;
  }

  document.querySelectorAll('.site-nav.is-open').forEach((nav) => {
    nav.classList.remove('is-open');
  });
  document.querySelectorAll('.menu-toggle').forEach((toggle) => {
    toggle.setAttribute('aria-expanded', 'false');
    toggle.setAttribute('aria-label', 'Open menu');
  });
  closeMobileMenus();
});

mobileMenuQuery.addEventListener('change', () => {
  document.querySelectorAll('.site-nav.is-open').forEach((nav) => {
    nav.classList.remove('is-open');
  });
  document.querySelectorAll('.menu-toggle').forEach((toggle) => {
    toggle.setAttribute('aria-expanded', 'false');
    toggle.setAttribute('aria-label', 'Open menu');
  });
  closeMobileMenus();
});

function updateScrolledHeaders() {
  document.querySelectorAll('.site-header').forEach((header) => {
    header.classList.toggle('is-scrolled', window.scrollY > 20);
  });
}

updateScrolledHeaders();
window.addEventListener('scroll', updateScrolledHeaders, { passive: true });