{% macro nav_head() %}
<style>
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-left, .nav-right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }
  nav a {
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--muted);
    padding: 1rem;
  }
  nav a:visited {
    color: var(--muted);
  }
  nav a:hover {
    color: var(--text);
  }
  nav a:active {
    color: var(--text);
  }
  .brand {
    color: var(--text);
    font-weight: 600;
  }
  .brand:visited,
  .brand:hover,
  .brand:active {
    color: var(--text);
  }
  #theme-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    padding: 1rem;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #theme-btn:hover {
    color: var(--text);
  }
  .theme-icon {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  [data-theme="light"] .theme-icon-moon {
    display: block;
  }
  [data-theme="dark"] .theme-icon-sun {
    display: block;
  }
</style>
{% endmacro %}

{% macro nav() %}
<nav>
  <div class="nav-left">
    <a class="brand" href="/">{{ site.name }}</a>
    {% for item in site.nav %}
    <a href="{{ item.url }}">{{ item.label }}</a>
    {% endfor %}
  </div>
  <div class="nav-right">
    <button id="theme-btn" onclick="toggleTheme()" aria-label="toggle theme">
      {% include "_svg/sun_icon.html" %}
      {% include "_svg/moon_icon.html" %}
    </button>
  </div>
</nav>
{% endmacro %}