import { Directive, ElementRef, HostListener, Renderer2, inject } from '@angular/core'; @Directive({ selector: '[appHoverEffectSidebar]', }) export class HoverEffectSidebarDirective { private elementRef = inject(ElementRef); @HostListener('mouseover') onHover() { if (window.innerWidth > 768) { this.elementRef.nativeElement.ownerDocument.documentElement?.setAttribute('icon-overlay', 'open'); } } @HostListener('mouseleave') onLeave() { if (window.innerWidth > 768) { this.elementRef.nativeElement.ownerDocument.documentElement?.removeAttribute('icon-overlay'); } } }