hostbbq-monitoring/ng/src/app/pages/admin-panel/admin-panel.component.html

<div class="d-flex">
  <ul ngbNav #nav="ngbNav" class="nav-pills" orientation="vertical">
    <li *ngFor="let serverConfig of serverConfigs" ngbNavItem>
      <a ngbNavLink (click)="fetchServiceChecks(serverConfig.id)">{{ serverConfig.title }}</a>
      <ng-template ngbNavContent>
        <button class="btn" (click)="addServiceCheck(serverConfig.id)">Add</button>
        <ngb-accordion #acc="ngbAccordion">
          <ngb-panel *ngFor="let serviceCheck of serviceChecks; let i = index">
            <ng-template ngbPanelHeader let-opened="opened">
              <button class="accordion-button" ngbPanelToggle [class.collapsed]="!opened">
                <p class="flex-fill m-0">{{ serviceCheck.title }}</p>

                <fa-icon class="me-1" (click)="saveServiceCheck(i, $event)" *ngIf="opened" [icon]="fa.save"></fa-icon>
              </button>
            </ng-template>
            <ng-template ngbPanelContent>
              <app-service-check-form [serviceCheck]="serviceCheck"></app-service-check-form>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </ng-template>
    </li>
  </ul>
  <div [ngbNavOutlet]="nav" class="flex-fill"></div>
</div>