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

import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';

@Component({
  selector: 'navigation-panel',
  templateUrl: './navigation-panel.component.html',
  styleUrl: './navigation-panel.component.scss',
})
export class NavigationPanelComponent {
  @ViewChild('navigationBackdrop') backdrop: any;
  @ViewChild('navigationPanel') panel: any;
  public active: number = 1;

  constructor(
    private navigation: NavigationPanelService,
    private router: Router
  ) {}

  public ngOnInit(): void {
    this.navigation.showNavigationPanel$.subscribe((state) => {
      if (state) {
        this.openPanel();
      } else {
        this.closePanel();
      }
    });
    this.checkForActiveTab();
  }

  public openPanel(): void {
    this.backdrop.nativeElement.classList.add('backdrop--open');
    this.panel.nativeElement.classList.add('panel--open');
  }

  public closePanel(): void {
    this.backdrop?.nativeElement.classList.remove('backdrop--open');
    this.panel?.nativeElement.classList.remove('panel--open');
  }

  private checkForActiveTab(): void {
    const tab = this.router.url.split('/')[2];
    switch (tab) {
      case 'stats':
        this.active = 1;
        break;
      case 'character':
        this.active = 2;
        break;
      case 'inventory':
        this.active = 3;
        break;
      case 'spellcards':
        this.active = 4;
        break;
      case 'notes':
        this.active = 5;
        break;
      case 'spellbook':
        this.active = 6;
        break;
      case 'quests':
        this.active = 7;
        break;
      case 'npcs':
        this.active = 8;
        break;
      case 'places':
        this.active = 9;
        break;
      case 'maps':
        this.active = 10;
        break;
      case 'ruleset':
        this.active = 11;
        break;
      default:
        this.active = 1;
        break;
    }
  }

  public setActiveProperty(number: number) {
    this.active = number;
  }
}