55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { Component, OnInit, Input, OnChanges } from '@angular/core';
|
|
import { MediaChange, ObservableMedia } from '@angular/flex-layout';
|
|
|
|
@Component({
|
|
selector: 'of-pages',
|
|
templateUrl: './pages.component.html',
|
|
styleUrls: ['./pages.component.scss']
|
|
})
|
|
export class PagesComponent implements OnInit, OnChanges {
|
|
|
|
@Input() isVisible = true;
|
|
visibility = 'shown';
|
|
|
|
sideNavOpened = true;
|
|
matDrawerOpened = false;
|
|
matDrawerShow = true;
|
|
sideNavMode = 'side';
|
|
|
|
constructor(private media: ObservableMedia) { }
|
|
|
|
ngOnInit() {
|
|
this.media.subscribe((mediaChange: MediaChange) => {
|
|
this.toggleView();
|
|
});
|
|
}
|
|
|
|
ngOnChanges() {
|
|
this.visibility = this.isVisible ? 'shown' : 'hidden';
|
|
}
|
|
|
|
getRouteAnimation(outlet) {
|
|
return outlet.activatedRouteData.animation;
|
|
}
|
|
|
|
toggleView() {
|
|
if (this.media.isActive('gt-md')) {
|
|
this.sideNavMode = 'side';
|
|
this.sideNavOpened = true;
|
|
this.matDrawerOpened = false;
|
|
this.matDrawerShow = true;
|
|
} else if (this.media.isActive('gt-xs')) {
|
|
this.sideNavMode = 'side';
|
|
this.sideNavOpened = false;
|
|
this.matDrawerOpened = true;
|
|
this.matDrawerShow = true;
|
|
} else if (this.media.isActive('lt-sm')) {
|
|
this.sideNavMode = 'over';
|
|
this.sideNavOpened = false;
|
|
this.matDrawerOpened = false;
|
|
this.matDrawerShow = false;
|
|
}
|
|
}
|
|
|
|
}
|