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

import { Component, ViewChild, Input } from '@angular/core';
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 {
  constructor(private navigation: NavigationPanelService) {}

  @Input() showAdditionalNavigation: boolean = true;

  @ViewChild('navigationBackdrop') backdrop: any;
  @ViewChild('navigationPanel') panel: any;

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

  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');
  }
}