<div #mobile class="mobile-nav" (click)="toggleMobileNav()">
  <span class="menu-header"> API Reference: </span>
  <span class="selected-item-info">
    <span class="selected-tag"> {{activeCatCaption}} </span>
    <span class="selected-endpoint">{{activeItemCaption}}</span>
  </span>
</div>
<div #desktop id="resources-nav">
  <h5 class="menu-header"> API reference </h5>
  <div *ngFor="let cat of categories; let idx = index" class="menu-cat">

    <label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [hidden]="cat.headless"
    [ngClass]="{active: cat.active}"> {{cat.name}}</label>
    <ul class="menu-subitems" [@itemAnimation]="cat.active ? 'expanded' : 'collapsed'">
      <li *ngFor="let method of cat.methods; trackBy:summary; let methIdx = index"
        [ngClass]="{active: method.active}"
        (click)="activateAndScroll(idx, methIdx)">
        {{method.summary}}
      </li>
    </ul>

  </div>
</div>
