{{ set colorClass = (path) => url === "/" + path ? '' : 'button--transparent' }}
{{ set slug = (cat) => cat.toLowerCase().replace(/\s+/g, '-') }}

<div class="nav-container">
  <nav id="diffuse-nav">
    <a href="dashboard/" class="button {{ colorClass("dashboard/") }} button--border">
      <span>
        <i class="ph-fill ph-person"></i>
        Your Diffuse
      </span>
    </a>

    <a href="guide/" class="button {{ colorClass("guide/") }} button--border">
      <span>
        <i class="ph-fill ph-book-open-text"></i>
        Guide
      </span>
    </a>

    <a href="featured/" class="button {{ colorClass("featured/") }} button--border">
      <span>
        <i class="ph-fill ph-sparkle"></i>
        Featured
      </span>
    </a>

    <a href="build/" class="button {{ colorClass("build/") }} button--border">
      <span>
        <i class="ph-fill ph-hammer"></i>
        Build
      </span>
    </a>

    <div class="divider"></div>

    <a href="data/" class="button {{ colorClass("data/") }} button--border">
      <span>Input & Output</span>
    </a>

    <a href="playback/" class="button {{ colorClass("playback/") }} button--border">
      <span>Playback</span>
    </a>

    <a href="browsing/" class="button {{ colorClass("browsing/") }} button--border">
      <span>Browsing</span>
    </a>

    <a href="themes/" class="button {{ colorClass("themes/") }} button--border">
      <span>Themes</span>
    </a>

    <a href="misc/" class="button {{ colorClass("misc/") }} button--border">
      <span>
        <i class="ph-fill ph-treasure-chest"></i>
      </span>
    </a>
  </nav>

  <button
    id="nav-overflow-btn"
    class="button button--transparent button--border"
    style="display: none; flex-shrink: 0"
    popovertarget="nav-overflow-menu"
  >
    <span class="with-icon">
      <i class="ph-fill ph-dots-three-outline"></i>
    </span>
  </button>

  <div id="nav-overflow-menu" class="dropdown" popover></div>
</div>