DNDTools/src/app/journal/journal-home/navigation-panel/navigation-panel.component.html

<div #navigationBackdrop class="backdrop" (click)="closePanel()"></div>
<div #navigationPanel class="panel">
  <h2 style="margin-bottom: 1.5rem">Menu</h2>
  {{ active }}
  <ul>
    <li>
      <div
        class="navigation-entry"
        [ngClass]="active === 1 ? 'active' : ''"
        (click)="setActiveProperty(1)"
        [routerLink]="'./stats'"
      >
        Kampf
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [ngClass]="active === 2 ? 'active' : ''"
        (click)="setActiveProperty(2)"
        [routerLink]="'./character'"
      >
        Charakter
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 3 ? 'active' : ''"
        (click)="setActiveProperty(3)"
        [routerLink]="'./inventory'"
      >
        Inventar
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 4 ? 'active' : ''"
        (click)="setActiveProperty(4)"
        [routerLink]="'./spellcards'"
      >
        Zauber
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 5 ? 'active' : ''"
        (click)="setActiveProperty(5)"
        [routerLink]="'./notes'"
      >
        Notizen
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 3 ? 'active' : ''"
        (click)="setActiveProperty(6)"
        [routerLink]="'./spellbook'"
      >
        Zauberbuch
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 7 ? 'active' : ''"
        (click)="setActiveProperty(7)"
        [routerLink]="'./quests'"
      >
        Aufträge
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 8 ? 'active' : ''"
        (click)="setActiveProperty(8)"
        [routerLink]="'./npcs'"
      >
        NPCs
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 9 ? 'active' : ''"
        (click)="setActiveProperty(9)"
        [routerLink]="'./places'"
      >
        Orte
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 10 ? 'active' : ''"
        (click)="setActiveProperty(10)"
        [routerLink]="'./maps'"
      >
        Karten
      </div>
    </li>

    <li>
      <div
        class="navigation-entry"
        [class]="active === 11 ? 'active' : ''"
        (click)="setActiveProperty(11)"
        [routerLink]="'./ruleset'"
      >
        Regelwerk
      </div>
    </li>
  </ul>

  <div class="settings-container">
    <button class="settings-button" [routerLink]="'../'">
      <icon [size]="'s'" [type]="'UI'" [icon]="'characters'"></icon>
      <div>Charaktere</div>
    </button>

    <button class="settings-button">
      <icon [size]="'s'" [type]="'UI'" [icon]="'settings'"></icon>
      <div>Einstellungen</div>
    </button>
  </div>
</div>