Simple Navbar

<!--
  The links live in a <ul> inside a <nav aria-label="Main"> because a screen
  reader user navigating by landmark needs to know which nav this is - a page
  with a main nav and a footer nav has two, and "navigation, navigation" is
  useless. aria-current="page" marks the active link: without it the highlight
  is a colour a screen reader cannot see.

  The hamburger is a real <button> with aria-expanded and aria-controls, so its
  state is announced rather than implied by an icon rotating.
-->
<header class="navbar">
  <nav class="navbar__inner" aria-label="Main">
    <a class="navbar__brand" href="/">Adysre</a>

    <ul class="navbar__links">
      <li><a class="navbar__link" href="/product" aria-current="page">Product</a></li>
      <li><a class="navbar__link" href="/pricing">Pricing</a></li>
      <li><a class="navbar__link" href="/docs">Docs</a></li>
    </ul>

    <a class="navbar__cta" href="/signup">Get started</a>

    <button
      class="navbar__toggle"
      type="button"
      aria-expanded="false"
      aria-controls="navbar-menu"
      aria-label="Open main menu"
    >
      <svg class="navbar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
        <path d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </nav>

  <ul class="navbar__menu" id="navbar-menu" hidden>
    <li><a class="navbar__link" href="/product" aria-current="page">Product</a></li>
    <li><a class="navbar__link" href="/pricing">Pricing</a></li>
    <li><a class="navbar__link" href="/docs">Docs</a></li>
    <li><a class="navbar__cta navbar__cta--block" href="/signup">Get started</a></li>
  </ul>
</header>

<script>
  document.querySelectorAll('.navbar').forEach(function (root) {
    var toggle = root.querySelector('.navbar__toggle');
    var menu = root.querySelector('.navbar__menu');

    toggle.addEventListener('click', function () {
      var open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      toggle.setAttribute('aria-label', open ? 'Open main menu' : 'Close main menu');
      menu.hidden = open;
    });
  });
</script>