Header Block

 
<header class="header">
  <div class="header__logo">
    <a href="/" aria-label="Vona homepage" class="secondary">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-file-code-icon lucide-file-code"
      >
        <path d="M10 12.5 8 15l2 2.5" />
        <path d="m14 12.5 2 2.5-2 2.5" />
        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
      </svg>
      <span>Vona</span>
    </a>
  </div>

  <nav class="header__nav-primary">
    <ul>
      <li><a href="/docs/blocks" class="secondary">Blocks</a></li>
      <li><a href="/docs/installation" class="secondary">Docs</a></li>
      <li>
        <a href="https://github.com/bit8bytes/vona" target="_blank"
          >{{ template "github-logo" . }}</a
        >
      </li>
      <li></li>
    </ul>
  </nav>

  <details class="header__mobile-menu">
    <summary aria-label="Toggle menu">☰</summary>
    <ul>
      <li><a href="/docs/blocks" class="secondary">Blocks</a></li>
      <li><a href="/docs/installation" class="secondary">Docs</a></li>
      <li>
        <a href="https://github.com/bit8bytes/vona" target="_blank">GitHub</a>
      </li>
      <li></li>
    </ul>
  </details>
</header>