@engie-group/fluid-design-system-angular/src/components/sidebar/directives/sidebar-item.directive.ts

Fluid Design System Angular

import {ChangeDetectorRef, Directive, DoCheck, Host, inject, Self} from '@angular/core';
import {ListItemComponent} from '../../list-item/list-item.component';
import {SidebarComponent} from '../sidebar.component';

@Directive({
  selector: '[njSidebarItem]',
  standalone: true
})
export class SidebarItemDirective implements DoCheck {
  private isCurrentlyFolded: boolean;

  @Host()
  private sidebar = inject(SidebarComponent);

  @Self()
  private listItem = inject(ListItemComponent);

  private cdr = inject(ChangeDetectorRef);

  constructor() {
    this.listItem.hasRightBorder = true;
    this.updateListItemFoldedState();
  }

  ngDoCheck() {
    if (this.isCurrentlyFolded !== this.sidebar.isFolded) {
      this.updateListItemFoldedState();
    }
  }

  private updateListItemFoldedState() {
    this.isCurrentlyFolded = this.sidebar.isFolded;
    this.listItem.isIconOnly = this.isCurrentlyFolded;
    this.cdr.markForCheck();
  }
}