@use 'sprucecss/scss/spruce' as *;

.site-navigation {
  --inset-block-start: 6rem;
  font-family: config('font-family-heading', $typography);

  &__btn {
    @include breakpoint('md') {
      display: none;
    }

    &[aria-expanded='true'] + ul {
      display: flex;
    }
  }

  ul {
    background-color: color('background');
    display: none;
    flex-direction: column;
    gap: spacer('s');
    inset: var(--inset-block-start) 0 auto 0;
    list-style: none;
    margin: 0;
    padding-block: spacer('m');
    padding-inline: spacer-clamp('m', 'l');
    position: absolute;

    @include breakpoint('md') {
      align-items: center;
      background-color: transparent;
      display: flex !important;
      flex-direction: row;
      flex-wrap: wrap;
      gap: spacer('m');
      inset: auto;
      padding: 0;
      position: relative;
    }

    @include breakpoint('lg') {
      gap: spacer('l');
    }
  }

  li {
    margin-block: 0;
  }

  a {
    color: color('heading');
    text-decoration: none;

    &:hover {
      color: color('primary');
    }

    &[aria-current='page'] {
      font-weight: 700;
    }
  }
}

<nav class="site-navigation" aria-label="Site">
    <button class="btn btn--primary btn--icon site-navigation__btn" data-action="navigation-toggle" aria-controls="primary-menu" aria-expanded="false" aria-label="Menu">
        <svg aria-hidden='true' focusable='false' role='img' height='24' style='fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;overflow:visible;' viewBox='0 0 24 24' width='24' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
            <path d='M24,19.6c0,-0.331 -0.269,-0.6 -0.6,-0.6l-20.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l20.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-22.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l22.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Zm0,-9c0,-0.331 -0.269,-0.6 -0.6,-0.6l-15.8,-0c-0.331,-0 -0.6,0.269 -0.6,0.6l0,2.8c0,0.331 0.269,0.6 0.6,0.6l15.8,-0c0.331,-0 0.6,-0.269 0.6,-0.6l0,-2.8Z'></path>
        </svg>
    </button>
    <ul class="navigation-menu">
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Products</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

(() => {
  const button = document.querySelector('[data-action="navigation-toggle"]');
  const menu = document.querySelector('.navigation-menu');
  const mq = window.matchMedia('(max-width: 64em)');

  if (!menu || typeof button === 'undefined') return;

  function widthChange(query) {
    button.setAttribute('aria-expanded', !query.matches);
  }

  button.addEventListener('click', () => {
    if (button.getAttribute('aria-expanded') === 'true') {
      button.setAttribute('aria-expanded', 'false');
    } else {
      button.setAttribute('aria-expanded', 'true');
      menu.querySelector('a').focus();
    }
  });

  mq.addListener(widthChange);
  widthChange(mq);
})();