import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appMenuToggle]',
})
export class MenuToggleDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
      this.onMenuToggle();
    });
  }

  // Menu Trigger
  onMenuToggle(): void {
    const sidebar: HTMLElement = document.getElementById('sidebar');
    sidebar?.classList.toggle('active');
    const content: HTMLElement = document.getElementById('content');
    content?.classList.toggle('active');
    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
    sidebarCollapse?.classList.toggle('active');
  }
}