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

@Directive({
  selector: '.nav-toggler'
})
export class MobileSidebarToggleDirective {
  constructor() {}

  @HostListener('click', ['$event'])
  toggleOpen($event: any) {
    $event.preventDefault();
    document.querySelector('body').classList.toggle('show-sidebar');
    document.querySelector('.nav-toggler i').classList.toggle('ti-menu');
    document.querySelector('.nav-toggler i').classList.add('ti-close');
  }
}

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '.right-side-toggle'
})
export class RightSidebarToggleDirective {
  constructor() {}

  @HostListener('click', ['$event'])
  toggleOpen($event: any) {
    $event.preventDefault();
    document.querySelector('.right-sidebar').classList.toggle('shw-rside');
  }
}

export const SIDEBAR_TOGGLE_DIRECTIVES = [
  MobileSidebarToggleDirective,
  RightSidebarToggleDirective
];