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">{{ "navigation.menu" | translate }}</h2>
  <ul>
    <li>
      <div
        class="navigation-entry"
        [ngClass]="active === 1 ? 'active' : ''"
        (click)="setActiveProperty(1); closeAll(); closePanel()"
        [routerLink]="'./stats'"
      >
        {{ "navigation.dashboard" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [ngClass]="active === 2 ? 'active' : ''"
        (click)="setActiveProperty(2); closeAll(); closePanel()"
        [routerLink]="'./character'"
      >
        {{ "navigation.character" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 3 ? 'active' : ''"
        (click)="setActiveProperty(3); closeAll(); closePanel()"
        [routerLink]="'./inventory'"
      >
        {{ "navigation.inventory" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 4 ? 'active' : ''"
        (click)="setActiveProperty(4); closeAll(); closePanel()"
        [routerLink]="'./spellcards'"
      >
        {{ "navigation.spells" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 5 ? 'active' : ''"
        (click)="setActiveProperty(5); closeAll(); closePanel()"
        [routerLink]="'./spellbook'"
      >
        {{ "navigation.spellbook" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 6 ? 'active' : ''"
        (click)="setActiveProperty(6); closeAll(); closePanel()"
        [routerLink]="'./notes'"
      >
        {{ "navigation.notes" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 7 ? 'active' : ''"
        (click)="setActiveProperty(7); closeAll(); closePanel()"
        [routerLink]="'./quests'"
      >
        {{ "navigation.quests" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 8 ? 'active' : ''"
        (click)="setActiveProperty(8); closeAll(); closePanel()"
        [routerLink]="'./npcs'"
      >
        {{ "navigation.npcs" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 9 ? 'active' : ''"
        (click)="setActiveProperty(9); closeAll(); closePanel()"
        [routerLink]="'./places'"
      >
        {{ "navigation.places" | translate }}
      </div>
    </li>
    <li>
      <div
        class="navigation-entry"
        [class]="active === 10 ? 'active' : ''"
        (click)="setActiveProperty(10); closeAll(); closePanel()"
        [routerLink]="'./maps'"
      >
        {{ "navigation.maps" | translate }}
      </div>
    </li>

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

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

    <button
      class="settings-button"
      [ngClass]="active === 12 ? 'active' : ''"
      [routerLink]="'./settings'"
    >
      <icon
        [size]="'s'"
        [type]="'UI'"
        (click)="closeAll()"
        [icon]="'settings'"
      ></icon>
      <div>{{ "navigation.settings" | translate }}</div>
    </button>
  </div>
</div>