<div class="the-navbar">
  <!-- back home -->
  <a aria-label="home" href="/" class="btn btn-ghost btn-circle">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-5 w-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <polyline
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        points="9 22 9 12 15 12 15 22" />
    </svg>
  </a>
  <div class="flex-grow">
    <!-- Simple search -->
    {% include "search/search.html" %}
  </div>
  <!-- categories -->
  <div class="dropdown dropdown-end">
    <div aria-label="categories" tabindex="0" role="button" class="btn btn-ghost btn-circle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor">
        <line
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          x1="8"
          y1="6"
          x2="21"
          y2="6" />
        <line
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          x1="8"
          y1="12"
          x2="21"
          y2="12" />
        <line
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          x1="8"
          y1="18"
          x2="21"
          y2="18" />
        <line
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          x1="3"
          y1="6"
          x2="3.01"
          y2="6" />
        <line
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          x1="3"
          y1="12"
          x2="3.01"
          y2="12" />
        <line
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          x1="3"
          y1="18"
          x2="3.01"
          y2="18" />
      </svg>
    </div>
    <ul
      tabindex="0"
      class="menu menu-md dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl border border-base-200">
      {% for tag in collections.blogTags %}
      <li><a href="/blog/tag/{{ tag | slugify }}">{{ tag }}</a></li>
      {% endfor %}
    </ul>
  </div>
</div>