import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import { Navigation } from 'app/core/navigation/navigation.types'; import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'classic-layout', templateUrl : './classic.component.html', encapsulation: ViewEncapsulation.None }) export class ClassicLayoutComponent implements OnInit, OnDestroy { isScreenSmall: boolean; navigation: Navigation; private _unsubscribeAll: Subject = new Subject(); /** * Constructor */ constructor( private _activatedRoute: ActivatedRoute, private _router: Router, private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) { } // ----------------------------------------------------------------------------------------------------- // @ Accessors // ----------------------------------------------------------------------------------------------------- /** * Getter for current year */ get currentYear(): number { return new Date().getFullYear(); } // ----------------------------------------------------------------------------------------------------- // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- /** * On init */ ngOnInit(): void { // Subscribe to navigation data this._navigationService.navigation$ .pipe(takeUntil(this._unsubscribeAll)) .subscribe((navigation: Navigation) => { this.navigation = navigation; }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ .pipe(takeUntil(this._unsubscribeAll)) .subscribe(({matchingAliases}) => { // Check if the screen is small this.isScreenSmall = !matchingAliases.includes('md'); }); } /** * On destroy */ ngOnDestroy(): void { // Unsubscribe from all subscriptions this._unsubscribeAll.next(); this._unsubscribeAll.complete(); } // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- /** * Toggle navigation * * @param name */ toggleNavigation(name: string): void { // Get the navigation const navigation = this._fuseNavigationService.getComponent(name); if ( navigation ) { // Toggle the opened status navigation.toggle(); } } }