navigation.hbs

<nav id="sidr" class="nav nav-collapse-preinit" data-component="{{@root.page.component.name}}" data-is-home="{{home}}"
  data-is-site-aspect="{{component.siteAspect}}" data-version="{{component.version.string}}" role="navigation">
  <button class="close-menu-btn">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <path fill="currentColor"
        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
    </svg>
  </button>

  {{#if (eq @root.page.component.name "ROOT")}}
  <div class="nav-components">
    <h3 class="nav-title">Start here</h3>
    {{#each (pick site.components "ROOT, learn")}}
      {{> navigation-component }}
    {{/each}}

    <h3 class="nav-title">Our Products</h3>
    {{#each (pick site.components "defender, contracts")}}
      {{> navigation-component }}
    {{/each}}

    <h3 class="nav-title">More</h3>
    {{#each (pick site.components "upgrades-plugins, contracts-cairo, nile") }}
      {{> navigation-component }}
    {{/each}}
  </div>

  {{else}}
  {{#with @root.page.component}}
  <div class="nav-component-active">
    <a class="btn-back" href="/">Home</a>
    <div class="flex justify-justified nav-heading">
      <span class="">{{{./title}}}</span>
      <div class="component-version">
        {{#if (and versions (eq this @root.page.component))}}
        {{#unless (eq versions.length 1)}}
        <button class="flex align-center shrink btn btn-version" onclick="this.focus()">
          {{@root.page.componentVersion.displayVersion}}
        </button>
        <div class="popover-container">
          <div class="popover">
            <p>Current version</p>
            <ul>
              <li>
                {{#with latest}}
                  <a href="{{{url}}}">{{displayVersion}}</a>
                {{/with}}
              </li>
            </ul>
            <p>Other versions</p>
            <ul>
              {{#each versions}}
                {{#unless (eq this ../latest)}}
                  <li>
                    <a href="{{{url}}}">{{displayVersion}}</a>
                  </li>
                {{/unless}}
              {{/each}}
            </ul>
          </div>
        </div>
        {{/unless}}
        {{/if}}
      </div>
    </div>
    {{#if (eq this @root.page.component)}}
    <ol class="nav-list">
      {{> navigation-tree items=@root.page.navigation}}
    </ol>
    {{/if}}
  </div>

  {{/with}}
  {{/if}}

</nav>