beachPartyBalloons/main-site/nav.js

(function () {
  var path = window.location.pathname;

  var links = [
    { label: 'Home',      href: '/' },
    { label: 'Shop',      href: '/shop' },
    { label: 'About Us',  href: '/about/' },
    { label: 'FAQ',       href: '/faq/' },
    { label: 'Gallery',   href: '/gallery/' },
    { label: 'Colors',    href: '/color/' },
    { label: 'Contact',   href: '/contact/' },
  ];

  function isActive(href) {
    if (href === '/') return path === '/';
    return path === href || path.startsWith(href);
  }

  var items = links.map(function (l) {
    var active = isActive(l.href) ? ' is-tab is-active' : '';
    return '<a class="navbar-item' + active + '" href="' + l.href + '">' + l.label + '</a>';
  }).join('\n        ');

  var navHTML = '<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">\n' +
    '  <div class="navbar-brand is-size-1">\n' +
    '    <a class="navbar-item" href="/">\n' +
    '      <img style="background-color:white" src="/assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo">\n' +
    '    </a>\n' +
    '    <a role="button" class="navbar-burger" id="site-burger" aria-label="menu" aria-expanded="false" data-target="site-navbar-menu">\n' +
    '      <span aria-hidden="true"></span>\n' +
    '      <span aria-hidden="true"></span>\n' +
    '      <span aria-hidden="true"></span>\n' +
    '      <span aria-hidden="true"></span>\n' +
    '    </a>\n' +
    '  </div>\n' +
    '  <div id="site-navbar-menu" class="navbar-menu has-text-right">\n' +
    '    <div class="navbar-end">\n' +
    '      ' + items + '\n' +
    '    </div>\n' +
    '  </div>\n' +
    '</nav>';

  var footerHTML = '<footer class="footer has-background-primary-light">\n' +
    '  <div class="content has-text-centered">\n' +
    '    <div>\n' +
    '      <a target="_blank" rel="noopener noreferrer" href="https://mastodon.social/@beachpartyballoons@mastodon.social"><i class="fa-brands fa-mastodon is-size-2"></i></a>\n' +
    '      <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/beachpartyballoons"><i class="fa-brands fa-facebook-f is-size-2"></i></a>\n' +
    '      <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/beachpartyballoons/"><i class="fa-brands fa-instagram is-size-2"></i></a>\n' +
    '      <a target="_blank" rel="noopener noreferrer" href="https://bsky.app/profile/beachpartyballoons.bsky.social"><i class="fa-brands fa-bluesky is-size-2"></i></a>\n' +
    '    </div>\n' +
    '    <p>Copyright &copy; ' + new Date().getFullYear() + ' Beach Party Balloons</p>\n' +
    '    <p>All images &amp; content are property of Beach Party Balloons. Use of images without written permission is prohibited.</p>\n' +
    '    <p style="font-size:0.8rem;margin-top:0.5rem">\n' +
    '      <a href="/shop/privacy">Privacy Policy</a>\n' +
    '      &nbsp;&middot;&nbsp;\n' +
    '      <a href="/shop/terms">Terms of Service</a>\n' +
    '      &nbsp;&middot;&nbsp;\n' +
    '      <a href="/shop/refund">Refund &amp; Cancellation Policy</a>\n' +
    '    </p>\n' +
    '  </div>\n' +
    '</footer>';

  var navEl = document.getElementById('site-nav');
  if (navEl) navEl.outerHTML = navHTML;

  var footerEl = document.getElementById('site-footer');
  if (footerEl) footerEl.outerHTML = footerHTML;

  // Burger toggle
  document.addEventListener('click', function (e) {
    var burger = e.target.closest('.navbar-burger');
    if (!burger) return;
    var target = document.getElementById(burger.dataset.target);
    burger.classList.toggle('is-active');
    if (target) target.classList.toggle('is-active');
  });
})();