{{~#if (or usages (or top_symbols document_navigation_str))~}}
  <div class="toc">
    <div>
      {{~#if usages~}}
        {{~> usages usages ~}}
      {{~/if~}}

      {{~#if top_symbols~}}
        <nav class="topSymbols">
          <h3>Symbols</h3>
          <ul>
            {{~#each top_symbols.symbols~}}
              <li>
                <a href="{{this.href}}" title="{{this.name}}">
                  {{~> doc_node_kind_icon this.kind~}}
                  <span class="hover:bg-{{this.kind.[0].kind}}/15 hover:bg-{{this.kind.[0].kind}}Dark/15">
                    {{this.name}}
                  </span>
                </a>
              </li>
            {{~/each~}}
          </ul>
          {{~#if (gt top_symbols.total_symbols 5)~}}
            <a class="flex items-center gap-0.5" href="{{top_symbols.all_symbols_href}}">
              <span class="leading-none">view all {{top_symbols.total_symbols}} symbols</span>
              {{~> icons/arrow ~}}
            </a>
          {{~/if~}}
        </nav>
      {{~/if~}}

      {{~#if document_navigation_str~}}
        <nav class="documentNavigation">
          <h3>Document Navigation</h3>
          {{{~document_navigation_str~}}} {{! table of contents }}
        </nav>
      {{~/if~}}
    </div>
  </div>
{{~/if~}}
