admin panel: further layouting

ng/src/app/app.component.html

@@ -1,6 +1,6 @@
 <app-header></app-header>
 
-<div class="container overflow-hidden position-relative pt-5">
+<div class="container flex-fill overflow-hidden position-relative pt-5">
   <div class="h-100 position-relative pt-3">
     <router-outlet></router-outlet>
   </div>

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

@@ -1,25 +1,35 @@
 <h3>Service Checks</h3>
 
-<div class="d-flex h-100">
-  <ul ngbNav #nav="ngbNav" class="nav-pills h-100" orientation="vertical" [(activeId)]="activeId">
+<div class="border d-flex flex-fill overflow-hidden">
+  <ul ngbNav #nav="ngbNav" class="border-end nav-pills h-100" style="width: 250px" orientation="vertical" [(activeId)]="activeId">
     <li *ngFor="let serverConfig of serverConfigs; index as s" [ngbNavItem]="s" class="bg-light text-primary">
-      <a ngbNavLink (click)="fetchServiceChecks(serverConfig.id)"><fa-icon class="pe-2" [icon]="fa.server"></fa-icon>{{ serverConfig.title }}</a>
+      <a ngbNavLink (click)="fetchServiceChecks(serverConfig.id)" class="d-flex btn btn-toolbar">
+        <fa-icon class="pe-2" [icon]="fa.server"></fa-icon>
+        <span class="flex-fill text-start">{{ serverConfig.title }}</span>
+        <fa-icon class="ps-2" [icon]="fa.angleRight"></fa-icon>
+      </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>
+        <div class="d-flex flex-column">
+          <div class="btn-group d-block">
+            <button class="btn btn-primary float-end m-1" (click)="addServiceCheck(serverConfig.id)">
+              <fa-icon class="pe-2" [icon]="fa.plus"></fa-icon>Add Service Check
+            </button>
+          </div>
+          <ngb-accordion #acc="ngbAccordion" className="flex-fill">
+            <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>
+                  <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>
+        </div>
       </ng-template>
     </li>
   </ul>

ng/src/app/pages/admin-panel/admin-panel.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { faSave, faServer } from '@fortawesome/free-solid-svg-icons';
+import { faAngleRight, faPlus, faSave, faServer } from '@fortawesome/free-solid-svg-icons';
 import { ServiceApiService } from '../../services/service-api.service';
 import { ServerApiService } from '../../services/server-api.service';
 import { ServiceCheckFormComponent } from '../../components/service-check-form/service-check-form.component';
@@ -14,7 +14,7 @@ export class AdminPanelComponent implements OnInit {
   @ViewChildren(ServiceCheckFormComponent) formChilds!: QueryList<ServiceCheckFormComponent>;
   public serverConfigs: ServerConfig[] = [];
   public serviceChecks: HttpCheckConfig[] = [];
-  public fa = { save: faSave, server: faServer };
+  public fa = { save: faSave, server: faServer, angleRight: faAngleRight, plus: faPlus };
 
   public activeId = 0;