<nav>
  <ul class="flex">
    <li class="mr-6">
      <a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
    </li>
    <li class="mr-6">
      <a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
    </li>
    <li class="mr-6">
      {% include "icons/coffee.liquid" %}
    </li>
    <li class="mr-6">
      {% include "icons/tags.liquid" %}
    </li>
    <li class="mr-6">
      {% include "icons/rss.liquid" %}
    </li>
    <li>
      {% include "icons/toggle-theme.liquid" %}
    </li>
  </ul>
</nav>