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()" />
    <divider [appearance]="'grey-dark-2'"></divider>
    {{ "character.level" | translate }}
  </div>
  <div class="name">{{ name }}</div>
  <div class="header-data">
    <input
      type="number"
      [(ngModel)]="data.experience"
      (change)="updateData()"
    />
    <divider [appearance]="'grey-dark-2'"></divider>
    {{ "character.experience" | translate }}
  </div>
</div>
<div class="character-body">
  <div class="d-flex">
    <div
      ngbNav
      #nav="ngbNav"
      [(activeId)]="activeTab"
      class="column navigation-bar"
      orientation="vertical"
    >
      <ng-container ngbNavItem="general">
        <button ngbNavLink>{{ "character.general.label" | translate }}</button>
        <ng-template ngbNavContent>
          <general></general>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="species">
        <button ngbNavLink>{{ "character.species.label" | translate }}</button>
        <ng-template ngbNavContent>
          <species></species>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="class">
        <button ngbNavLink>{{ "character.class.label" | translate }}</button>
        <ng-template ngbNavContent>
          <class></class>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="subclass">
        @if (showSubclass) {
          {{ data.title }}
          <button ngbNavLink>
            {{ "character.subclass." + data.class | translate }}
          </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"
            />
            {{ "character.subclass." + data.class | translate }}
          </button>
        }
      </ng-container>
      <ng-container ngbNavItem="combined">
        <button ngbNavLink>{{ "character.complete.label" | translate }}</button>
        <ng-template ngbNavContent>
          <combined></combined>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="background">
        <button ngbNavLink>
          {{ "character.background.label" | translate }}
        </button>
        <ng-template ngbNavContent>
          <background></background>
        </ng-template>
      </ng-container>
      <ng-container ngbNavItem="stroy">
        <button ngbNavLink>{{ "character.story.label" | translate }}</button>
        <ng-template ngbNavContent>
          <story></story>
        </ng-template>
      </ng-container>
    </div>

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