| import { Component, Input, ChangeDetectionStrategy, AfterViewInit, HostBinding } from '@angular/core'; | <> | import { Component, Input, AfterViewInit, HostBinding } from '@angular/core'; |
| import { Router } from '@angular/router'; | = | import { Router } from '@angular/router'; |
| import { AppService } from '../../app.service'; | import { AppService } from '../../app.service'; | |
| import { LayoutService } from '../layout.service'; | import { LayoutService } from '../layout.service'; | |
| @Component({ | @Component({ | |
| selector: 'app-layout-sidenav', | selector: 'app-layout-sidenav', | |
| templateUrl: './layout-sidenav.component.html', | templateUrl: './layout-sidenav.component.html', | |
| styles: [':host { display: block; }'], | <> | styles: [':host { display: block; }'] |
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | = | }) |
| export class LayoutSidenavComponent implements AfterViewInit { | export class LayoutSidenavComponent implements AfterViewInit { | |
| @Input() orientation = 'vertical'; | @Input() orientation = 'vertical'; | |
| @HostBinding('class.layout-sidenav') private hostClassVertical = false; | <> | @HostBinding('class.layout-sidenav') hostClassVertical = false; |
| @HostBinding('class.layout-sidenav-horizontal') private hostClassHorizontal = false; | @HostBinding('class.layout-sidenav-horizontal') hostClassHorizontal = false; | |
| @HostBinding('class.flex-grow-0') private hostClassFlex = false; | @HostBinding('class.flex-grow-0') hostClassFlex = false; | |
| = | ||
| constructor(private router: Router, private appService: AppService, private layoutService: LayoutService) { | constructor(private router: Router, private appService: AppService, private layoutService: LayoutService) { | |
| // Set host classes | // Set host classes | |
| this.hostClassVertical = this.orientation !== 'horizontal'; | this.hostClassVertical = this.orientation !== 'horizontal'; | |
| this.hostClassHorizontal = !this.hostClassVertical; | this.hostClassHorizontal = !this.hostClassVertical; | |
| this.hostClassFlex = this.hostClassHorizontal; | this.hostClassFlex = this.hostClassHorizontal; | |
| } | } | |
| ngAfterViewInit() { | ngAfterViewInit() { | |
| // Safari bugfix | // Safari bugfix | |
| this.layoutService._redrawLayoutSidenav(); | this.layoutService._redrawLayoutSidenav(); | |
| } | } | |
| getClasses() { | getClasses() { | |
| let bg = this.appService.layoutSidenavBg; | let bg = this.appService.layoutSidenavBg; | |
| if (this.orientation === 'horizontal' && (bg.indexOf(' sidenav-dark') !== -1 || bg.indexOf(' sidenav-light') !== -1)) { | if (this.orientation === 'horizontal' && (bg.indexOf(' sidenav-dark') !== -1 || bg.indexOf(' sidenav-light') !== -1)) { | |
| bg = bg | bg = bg | |
| .replace(' sidenav-dark', '') | .replace(' sidenav-dark', '') | |
| .replace(' sidenav-light', '') | .replace(' sidenav-light', '') | |
| .replace('-darker', '') | .replace('-darker', '') | |
| .replace('-dark', ''); | .replace('-dark', ''); | |
| } | } | |
| return `${this.orientation === 'horizontal' ? 'container-p-x ' : ''} bg-${bg}`; | return `${this.orientation === 'horizontal' ? 'container-p-x ' : ''} bg-${bg}`; | |
| } | } | |
| isActive(url) { | isActive(url) { | |
| return this.router.isActive(url, true); | return this.router.isActive(url, true); | |
| } | } | |
| isMenuActive(url) { | isMenuActive(url) { | |
| return this.router.isActive(url, false); | return this.router.isActive(url, false); | |
| } | } | |
| isMenuOpen(url) { | isMenuOpen(url) { | |
| return this.router.isActive(url, false) && this.orientation !== 'horizontal'; | return this.router.isActive(url, false) && this.orientation !== 'horizontal'; | |
| } | } | |
| toggleSidenav() { | toggleSidenav() { | |
| this.layoutService.toggleCollapsed(); | this.layoutService.toggleCollapsed(); | |
| } | } | |
| } | } |