import { animate , state , style , transition , trigger } from '@angular/animations' ; import { ChangeDetectionStrategy , Component , Inject , Optional } from '@angular/core' ; import { Router } from '@angular/router' ; import { LayoutFacade } from '../../../layout-core/+state/layout.facade' ; import { NavLink } from '../../interfaces/nav-link.interface' ; import { NavMenu } from '../../interfaces/nav-menu.interface' ; import { NAV_LINKS } from '../../layouts.tokens' ; @ Component ( { selector : 'medium-stories-side-menu' , templateUrl : './side-menu.component.html' , styleUrls : [ './side-menu.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , animations : [ trigger ( 'toggleSidemenu' , [ state ( 'closed' , style ( { height : '0' } ) ) , state ( 'collapsed' , style ( { height : '0' } ) ) , state ( 'expanded' , style ( { height : '*' } ) ) , transition ( '* => closed' , [ animate ( '0.5s' ) ] ) , transition ( '* => expanded' , [ animate ( '0.5s' ) ] ) , transition ( 'expanded => collapsed' , [ animate ( '0.5s' ) ] ) ] ) ] } ) export class SideMenuComponent { constructor ( public layoutFacade , @ Optional ( ) @ Inject ( NAV_LINKS ) public navLinks , private router ) { } param overview hasOverview ( overview ) { return overview && overview . route !== this . router . routerState . snapshot . url ; } trackByFn ( index , navLink ) { return navLink . label ; } param id param index param menu private getAnimationState ( id , index , menu ) { let animation = null ; if ( menu . active . index === null ) { animation = 'closed' ; } else { if ( menu . active . id === id && menu . active . index === index ) { animation = menu . active . isHovered ? 'expanded' : 'collapsed' ; } else if ( menu . previous . id === id ) { if ( menu . previous . index === index && menu . previous . level < menu . active . level ) { animation = 'expanded' ; } else { animation = 'closed' ; } } else if ( menu . active . id === menu . previous . id ) { if ( menu . active . id === id + '_' + index ) { animation = 'expanded' ; } else { animation = 'closed' ; } } else { animation = 'closed' ; } } return animation ; } }