{# Persistent nav for dashboard pages. Caller passes ``active`` =
   ``'overview'`` | ``'api_keys'`` so the right tab gets the active
   class. Adding a tab: drop another ``<li>`` here + extend the
   ``active`` literal in the route handlers that render the page. #}
<nav class="dash-nav" aria-label="Dashboard sections">
  <ul>
    <li>
      <a href="/dashboard"
         class="dash-nav-tab{% if active == 'overview' %} active{% endif %}"
         {% if active == 'overview' %}aria-current="page"{% endif %}>
        Overview
      </a>
    </li>
    <li>
      <a href="/dashboard/api-keys"
         class="dash-nav-tab{% if active == 'api_keys' %} active{% endif %}"
         {% if active == 'api_keys' %}aria-current="page"{% endif %}>
        API keys
      </a>
    </li>
    <li>
      <a href="/dashboard/data"
         class="dash-nav-tab{% if active == 'data' %} active{% endif %}"
         {% if active == 'data' %}aria-current="page"{% endif %}>
        Your data
      </a>
    </li>
  </ul>
</nav>