import { trigger, state, style, transition, animate } from '@angular/animations';
import { Component, Input } from '@angular/core';
import { ActiveSidebarService } from 'src/app/core/services/active-sidebar.service';

@Component({
  selector: 'custom-sidebar-item',
  templateUrl: './custom-sidebar-item.component.html',
  animations: [
    trigger('submenuAnimation', [
      state('closed', style({
        height: '0px',
        opacity: 0,
        overflow: 'hidden',
      })),
      state('open', style({
        height: '*',
        opacity: 1,
        overflow: 'hidden',
      })),
      transition('closed => open', [
        animate('300ms ease-in-out')
      ]),
      transition('open => closed', [
        animate('200ms ease-in-out')
      ])
    ])
  ]
})
export class CustomSidebarItemComponent {
  @Input() menuItems: any[] = []; // Input for the nested menu items
  @Input() isMobile: boolean = false; // Input for the nested menu items

  constructor(public checkSidebar: ActiveSidebarService) { }

  toggleSubMenu(item: any) {
    item.expanded = !item.expanded; // Toggle the 'isOpen' property
  }
}
