ISA-Frontend/libs/shell/header/src/lib/components/navigation-toggle.component.ts

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
} from '@angular/core';
import { logger } from '@isa/core/logging';
import { isaActionClose, isaNavigationSidemenu } from '@isa/icons';
import { NavigationService } from '@isa/shell/common';
import {
  IconButtonComponent,
  IconButtonColor,
  IconButtonSize,
} from '@isa/ui/buttons';
import { provideIcons } from '@ng-icons/core';

@Component({
  selector: 'shell-navigation-toggle',
  template: `<ui-icon-button
    [name]="iconName()"
    [color]="IconButtonColor.Primary"
    [size]="IconButtonSize.Large"
    (click)="toggle()"
    data-what="button"
    data-which="navigation-toggle"
    [attr.aria-label]="ariaLabel()"
    [attr.aria-expanded]="navigationService.get()"
  />`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [IconButtonComponent],
  providers: [provideIcons({ isaNavigationSidemenu, isaActionClose })],
})
export class ShellNavigationToggleComponent {
  #logger = logger({ component: 'ShellNavigationToggleComponent' });

  readonly navigationService = inject(NavigationService);

  readonly IconButtonColor = IconButtonColor;
  readonly IconButtonSize = IconButtonSize;

  iconName = computed(() => {
    const open = this.navigationService.get();
    return open ? 'isaActionClose' : 'isaNavigationSidemenu';
  });

  ariaLabel = computed(() =>
    this.navigationService.get() ? 'Menü schließen' : 'Menü öffnen',
  );

  toggle(): void {
    this.navigationService.toggle();
    this.#logger.debug('Navigation toggled', () => ({
      isOpen: this.navigationService.get(),
    }));
  }
}