DNDTools/src/app/journal/journal-character/journal-character.component.html

<div class="header">
  <div class="header-data">
    <input type="number" [(ngModel)]="data.level" (change)="updateData()" />
    <div class="horizontal-ruler"></div>
    Stufe
  </div>
  <div class="name">{{ name }}</div>
  <div class="header-data">
    <input
      type="number"
      [(ngModel)]="data.experience"
      (change)="updateData()"
    />
    <div class="horizontal-ruler"></div>
    Erfahrungspunkte
  </div>
</div>
<div class="character-body">
  <div class="d-flex">
    <div
      ngbNav
      #nav="ngbNav"
      [(activeId)]="activeTab"
      class="flex-column navigation-bar"
      orientation="vertical"
    >
      <ng-container ngbNavItem="general">
        <button ngbNavLink>Allgemeines</button>
        <ng-template ngbNavContent>
          <general></general>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="species">
        <button ngbNavLink>Volk</button>
        <ng-template ngbNavContent>
          <species></species>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="class">
        <button ngbNavLink>Klasse</button>
        <ng-template ngbNavContent>
          <class></class>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="subclass">
        @if(data.level >= 3 || data.class === "Cleric"){
        <button ngbNavLink>Unterklasse</button>
        <ng-template ngbNavContent>
          <subclass></subclass>
        </ng-template>
        }@else{
        <button class="disabled-button" disabled>
          <img
            style="display: inline"
            src="assets/icons/UIIcons/lock.svg"
            alt="locked"
          />
          Unterklasse
        </button>
        }
      </ng-container>
      <ng-container ngbNavItem="combined">
        <button ngbNavLink>Tabellen- ansicht</button>
        <ng-template ngbNavContent>
          <!-- <class></class> -->
          combined works!
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="background">
        <button ngbNavLink>Hintergrund</button>
        <ng-template ngbNavContent>
          <!-- <class></class> -->
          background works!
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="stroy">
        <button ngbNavLink>Geschichte</button>
        <ng-template ngbNavContent>
          <!-- <class></class> -->
          story works!
        </ng-template>
      </ng-container>
    </div>

    <div [ngbNavOutlet]="nav" class="outlet"></div>
  </div>
</div>