| 1 | import { Component, Input, AfterViewInit, HostBinding } from '@angular/core'; | = | 1 | import { Component, Input, AfterViewInit, HostBinding } from '@angular/core'; |
| 2 | import { Router } from '@angular/router'; | 2 | import { Router } from '@angular/router'; | |
| 3 | import { AppService } from '../../app.service'; | 3 | import { AppService } from '../../app.service'; | |
| 4 | import { LayoutService } from '../layout.service'; | 4 | import { LayoutService } from '../layout.service'; | |
| 5 | 5 | |||
| 6 | @Component({ | 6 | @Component({ | |
| 7 | selector: 'app-layout-sidenav', | 7 | selector: 'app-layout-sidenav', | |
| 8 | templateUrl: './layout-sidenav.component.html', | 8 | templateUrl: './layout-sidenav.component.html', | |
| 9 | styles: [':host { display: block; }'] | 9 | styles: [':host { display: block; }'] | |
| 10 | }) | 10 | }) | |
| 11 | export class LayoutSidenavComponent implements AfterViewInit { | 11 | export class LayoutSidenavComponent implements AfterViewInit { | |
| 12 | @Input() orientation = 'vertical'; | 12 | @Input() orientation = 'vertical'; | |
| 13 | 13 | |||
| 14 | @HostBinding('class.layout-sidenav') hostClassVertical = false; | 14 | @HostBinding('class.layout-sidenav') hostClassVertical = false; | |
| 15 | @HostBinding('class.layout-sidenav-horizontal') hostClassHorizontal = false; | 15 | @HostBinding('class.layout-sidenav-horizontal') hostClassHorizontal = false; | |
| 16 | @HostBinding('class.flex-grow-0') hostClassFlex = false; | 16 | @HostBinding('class.flex-grow-0') hostClassFlex = false; | |
| 17 | 17 | |||
| 18 | constructor(private router: Router, private appService: AppService, private layoutService: LayoutService) { | 18 | constructor(private router: Router, private appService: AppService, private layoutService: LayoutService) { | |
| 19 | // Set host classes | 19 | // Set host classes | |
| 20 | this.hostClassVertical = this.orientation !== 'horizontal'; | 20 | this.hostClassVertical = this.orientation !== 'horizontal'; | |
| 21 | this.hostClassHorizontal = !this.hostClassVertical; | 21 | this.hostClassHorizontal = !this.hostClassVertical; | |
| 22 | this.hostClassFlex = this.hostClassHorizontal; | 22 | this.hostClassFlex = this.hostClassHorizontal; | |
| 23 | } | 23 | } | |
| 24 | 24 | |||
| 25 | ngAfterViewInit() { | <> | 25 | ngAfterViewInit(): void { |
| 26 | // Safari bugfix | = | 26 | // Safari bugfix |
| 27 | this.layoutService._redrawLayoutSidenav(); | 27 | this.layoutService._redrawLayoutSidenav(); | |
| 28 | } | 28 | } | |
| 29 | 29 | |||
| 30 | getClasses() { | <> | 30 | getClasses(): string { |
| 31 | let bg = this.appService.layoutSidenavBg; | = | 31 | let bg = this.appService.layoutSidenavBg; |
| 32 | 32 | |||
| 33 | if (this.orientation === 'horizontal' && (bg.indexOf(' sidenav-dark') !== -1 || bg.indexOf(' sidenav-light') !== -1)) { | 33 | if (this.orientation === 'horizontal' && (bg.indexOf(' sidenav-dark') !== -1 || bg.indexOf(' sidenav-light') !== -1)) { | |
| 34 | bg = bg | 34 | bg = bg | |
| 35 | .replace(' sidenav-dark', '') | 35 | .replace(' sidenav-dark', '') | |
| 36 | .replace(' sidenav-light', '') | 36 | .replace(' sidenav-light', '') | |
| 37 | .replace('-darker', '') | 37 | .replace('-darker', '') | |
| 38 | .replace('-dark', ''); | 38 | .replace('-dark', ''); | |
| 39 | } | 39 | } | |
| 40 | 40 | |||
| 41 | return `${this.orientation === 'horizontal' ? 'container-p-x ' : ''} bg-${bg}`; | 41 | return `${this.orientation === 'horizontal' ? 'container-p-x ' : ''} bg-${bg}`; | |
| 42 | } | 42 | } | |
| 43 | 43 | |||
| 44 | isActive(url) { | <> | 44 | isActive(url: string): boolean { |
| 45 | return this.router.isActive(url, true); | = | 45 | return this.router.isActive(url, true); |
| 46 | } | 46 | } | |
| 47 | 47 | |||
| 48 | isMenuActive(url) { | <> | 48 | isMenuActive(url: string): boolean { |
| 49 | return this.router.isActive(url, false); | = | 49 | return this.router.isActive(url, false); |
| 50 | } | 50 | } | |
| 51 | 51 | |||
| 52 | isMenuOpen(url) { | <> | 52 | isMenuOpen(url: string): boolean { |
| 53 | return this.router.isActive(url, false) && this.orientation !== 'horizontal'; | = | 53 | return this.router.isActive(url, false) && this.orientation !== 'horizontal'; |
| 54 | } | 54 | } | |
| 55 | 55 | |||
| 56 | toggleSidenav() { | <> | 56 | toggleSidenav(): void { |
| 57 | this.layoutService.toggleCollapsed(); | = | 57 | this.layoutService.toggleCollapsed(); |
| 58 | } | 58 | } | |
| 59 | } | 59 | } |