import { Component , OnDestroy , OnInit , ViewChild , ViewEncapsulation } from '@angular/core' ; import { NavigationEnd , Router } from '@angular/router' ; import { Subject } from 'rxjs' ; import { filter , take , takeUntil } from 'rxjs/operators' ; import { NotaddConfigService } from '@notadd/services/config.service' ; import { NotaddPerfectScrollbarDirective } from '@notadd/directives/perfect-scrollbar/perfect-scrollbar.directive' ; import { NotaddSidebarService } from '@notadd/components/sidebar/sidebar.service' ; import { NotaddNavigationService } from '@notadd/components/navigation/navigation.service' ; @ Component ( { selector : 'navbar' , templateUrl : './navbar.component.html' , styleUrls : [ './navbar.component.scss' ] , encapsulation : ViewEncapsulation . None } ) export class NavbarComponent implements OnInit , OnDestroy { notaddConfig : any ; notaddPerfectScrollbarUpdateTimeout : any ; private notaddPerfectScrollbar : NotaddPerfectScrollbarDirective ; private ngUnsubscribe : Subject < any > ; constructor ( private configService , private sidebarService , private navigationService , private router ) { this . ngUnsubscribe = new Subject < any > ( ) ; } @ ViewChild ( NotaddPerfectScrollbarDirective , { static : true } ) set directive ( theDirective ) { if ( ! theDirective ) { return ; } this . notaddPerfectScrollbar = theDirective ; this . navigationService . onItemCollapseToggled . pipe ( takeUntil ( this . ngUnsubscribe ) ) . subscribe ( ( ) => { this . notaddPerfectScrollbarUpdateTimeout = setTimeout ( ( ) => { this . notaddPerfectScrollbar . update ( ) ; } , 310 ) ; } ) ; this . router . events . pipe ( filter ( ( event ) => event instanceof NavigationEnd ) , take ( 1 ) ) . subscribe ( ( ) => { setTimeout ( ( ) => { const activeNavItem = document . querySelector ( 'navbar .nav-link.active' ) ; if ( activeNavItem ) { const activeItemOffsetTop = activeNavItem . offsetTop , activeItemOffsetParentTop = activeNavItem . offsetParent . offsetTop , scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - ( 48 * 3 ) - 168 ; this . notaddPerfectScrollbar . scrollToTop ( scrollDistance ) ; } } , 1000 ) ; } ) ; } ngOnInit ( ) { this . configService . config . pipe ( takeUntil ( this . ngUnsubscribe ) ) . subscribe ( ( config ) => { this . notaddConfig = config ; } ) ; } ngOnDestroy ( ) { if ( this . notaddPerfectScrollbarUpdateTimeout ) { clearTimeout ( this . notaddPerfectScrollbarUpdateTimeout ) ; } this . ngUnsubscribe . next ( ) ; this . ngUnsubscribe . complete ( ) ; } }