daw/parts/header.html

<!-- wp:html -->
<header id="header">
	<div class="navbar fixed-top">
		<div class="container">
			<div class="site-title">
        <a href="#nav" class="navbar-brand navbar-right light" aria-controls="nav" title="David A. Windham" rel="home">David A. Windham</a>
			</div>
		</div>
	</div>
</header>
<div class="dw-offcanvas text-bg-blue" tabindex="-1" id="nav" aria-labelledby="navLabel">
  <nav class="d-flex justify-content-center" role="navigation">
    <ul class="nav list-group list-group-horizontal pt-3 fs-5">
      <li class="list-group-item"><a href="/about">About</a></li>
      <li class="list-group-item"><a href="/desk">Desk</a></li>
      <li class="list-group-item"><a href="/studio">Studio</a></li>
      <li class="list-group-item"><a href="/work">Work</a></li>
      <span class="dw-nav-underline" aria-hidden="true"></span>
    </ul>
  </nav>
</div>
<a href="#" class="dw-offcanvas-backdrop" tabindex="-1" aria-hidden="true"></a>
<script>
/* Floating "magic line" underline for the #nav items: one shared underline slides
   between items on hover and rests under the current-page item. Positions come from
   offset* (layout geometry), unaffected by the offcanvas translateY transform, so it
   measures correctly while the panel is closed or mid-slide. Inlined here because the
   nav is global but the js bundle (v4-script.min.js) is only enqueued on some pages. */
(function () {
  function init() {
    var nav = document.querySelector('#nav ul.nav');
    if (!nav) return;
    var line = nav.querySelector('.dw-nav-underline');
    if (!line) return;
    var links = Array.prototype.slice.call(nav.querySelectorAll('.list-group-item > a'));
    if (!links.length) return;
    function rel(el) {
      var left = 0, top = 0, node = el;
      while (node && node !== nav) { left += node.offsetLeft; top += node.offsetTop; node = node.offsetParent; }
      return { left: left, top: top, width: el.offsetWidth, height: el.offsetHeight };
    }
    function place(el, show) {
      var r = rel(el);
      line.style.left = r.left + 'px';
      line.style.width = r.width + 'px';
      line.style.top = (r.top + r.height) + 'px';
      line.style.opacity = show ? '1' : '0';
    }
    function activeLink() {
      var here = location.pathname.replace(/\/+$/, '') || '/';
      var seg = '/' + (here.split('/')[1] || '');
      var exact = null, section = null;
      links.forEach(function (a) {
        var p = a.pathname.replace(/\/+$/, '') || '/';
        if (p === here) exact = a;
        if (p === seg) section = a;
      });
      return exact || section;
    }
    var active = activeLink();
    function rest() { if (active) place(active, true); else line.style.opacity = '0'; }
    links.forEach(function (a) { a.addEventListener('mouseenter', function () { place(a, true); }); });
    nav.addEventListener('mouseleave', rest);
    window.addEventListener('resize', rest);
    rest();
  }
  if (document.readyState !== 'loading') init();
  else document.addEventListener('DOMContentLoaded', init);
})();
</script>
<!-- /wp:html -->