dump-panel.component.html

<div *ngIf="(debugState.enabled$ | async)">
  <p-sidebar
    [(visible)]="visible"
    [fullScreen]="fullScreen"
    position="right"
    [modal]="false"
    [dismissible]="false"
    [showCloseIcon]="false"
  >
    <div class="toolbar">
      <p-button
        (onClick)="fullScreen = !fullScreen"
        icon="fa fa-{{ fullScreen ? 'compress' : 'expand' }} }}-arrows-alt"
      ></p-button>
      <p-button (onClick)="visible = false" icon="fa fa-times"></p-button>
    </div>

    <p-tabView>
      <p-tabPanel header="Watches ({{ watchCount }})">
        <div class="data-panel">
          <app-watch-display (countChanged)="setWatchCount($event)"></app-watch-display>
        </div>
      </p-tabPanel>
      <p-tabPanel header="Spies ({{ spyCount }})">
        <div class="data-panel">
          <app-spy-display (countChanged)="setSpyCount($event)"></app-spy-display>
        </div>
      </p-tabPanel>
      <p-tabPanel header="API ({{ apiCallCount }})">
        <div class="data-panel">
          <app-api-debug (countChanged)="setApiCallCount($event)"></app-api-debug>
        </div>
      </p-tabPanel>
    </p-tabView>
  </p-sidebar>

  <p-button *ngIf="!visible" ngClass="open-button" (onClick)="visible = true" icon="fa fa-angle-double-left"></p-button>
</div>