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>
  <ul>
    <li>
      <div
        class="navigation-entry"
        [ngClass]="active === 1 ? 'active' : ''"
        (click)="setActiveProperty(1); closeAll()"
        [routerLink]="'./stats'"
      >
        Übersicht
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [ngClass]="active === 2 ? 'active' : ''"
        (click)="setActiveProperty(2); closeAll()"
        [routerLink]="'./character'"
      >
        Charakter
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 3 ? 'active' : ''"
        (click)="setActiveProperty(3); closeAll()"
        [routerLink]="'./inventory'"
      >
        Inventar
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 4 ? 'active' : ''"
        (click)="setActiveProperty(4); closeAll()"
        [routerLink]="'./spellcards'"
      >
        Zauber
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 5 ? 'active' : ''"
        (click)="setActiveProperty(5); closeAll()"
        [routerLink]="'./notes'"
      >
        Notizen
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 6 ? 'active' : ''"
        (click)="setActiveProperty(6); closeAll()"
        [routerLink]="'./spellbook'"
      >
        Zauberbuch
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 7 ? 'active' : ''"
        (click)="setActiveProperty(7); closeAll()"
        [routerLink]="'./quests'"
      >
        Aufträge
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 8 ? 'active' : ''"
        (click)="setActiveProperty(8); closeAll()"
        [routerLink]="'./npcs'"
      >
        NPCs
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 9 ? 'active' : ''"
        (click)="setActiveProperty(9); closeAll()"
        [routerLink]="'./places'"
      >
        Orte
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 10 ? 'active' : ''"
        (click)="setActiveProperty(10); closeAll()"
        [routerLink]="'./maps'"
      >
        Karten
      </div>
    </li>

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

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

    <button class="settings-button" [routerLink]="'./settings'">
      <icon
        [size]="'s'"
        [type]="'UI'"
        (click)="closeAll()"
        [icon]="'settings'"
      ></icon>
      <div>Einstellungen</div>
    </button>
  </div>
</div>