nav-bar.component.ts 2.06 KB
Newer Older
mdsecurity's avatar
mdsecurity committed
1
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2
import {
3
4
5
6
7
8
	trigger,
	state,
	style,
	animate,
	transition,
	keyframes
9
} from '@angular/animations';
mdsecurity's avatar
mdsecurity committed
10
@Component({
11
12
13
14
15
16
	selector: 'app-nav-bar',
	templateUrl: './nav-bar.component.html',
	styleUrls: ['./nav-bar.component.scss'],
	animations: [
		trigger('toggle-large-bar', [
			state('expanded', style({
17
18
				transform: 'translateY(0px)',
				zIndex: '1'
19
20
			})),
			state('collapsed', style({
21
22
				transform: 'translateY(-400px)',
				zIndex: '1000'
23
			})),
24
25
			transition('expanded => collapsed', animate('250ms cubic-bezier(.35,0,.61,1)')),
			transition('collapsed => expanded', animate('250ms ease-in-out'))
26
27
28
		]),
		trigger('toggle-small-bar', [
			state('expanded', style({
29
				backgroundColor: 'transparent'
30
31
			})),
			state('collapsed', style({
32
				backgroundColor: '#006633'
33
			})),
34
35
			transition('expanded => collapsed', animate('250ms 250ms ease-out')),
			transition('collapsed => expanded', animate('250ms ease-out'))
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
		]),
		trigger('toggle-links', [
			state('expanded', style({
				color: '#354052',
				transform: 'translate(-50%,-50%)'
			})),
			state('collapsed', style({
				color: '#ffffff',
				transform: 'translate(-50%,-50%) translateX(15%)'
			})),
			transition('expanded => collapsed', animate('150ms ease-out')),
			transition('collapsed => expanded', animate('150ms ease-out'))
		]),
		trigger('toggle-logo-and-text', [
			state('expanded', style({
				opacity: '0'
			})),
			state('collapsed', style({
54
				opacity: '100'
55
			})),
56
			transition('expanded => collapsed', animate('150ms 100ms ease-out')),
57
58
59
60
61
62
			transition('collapsed => expanded', animate('150ms ease-out'))
		])



	]
mdsecurity's avatar
mdsecurity committed
63
})
64
export class NavBarComponent implements OnInit {
mdsecurity's avatar
mdsecurity committed
65
66
	state = 'collapsed';
	@Output() navState: EventEmitter<string> = new EventEmitter<string>();
67
	constructor() { }
mdsecurity's avatar
mdsecurity committed
68

69
	ngOnInit() {
mdsecurity's avatar
mdsecurity committed
70
		this.navState.emit(this.state);
71
72
	}
	toggleState(): void {
mdsecurity's avatar
mdsecurity committed
73
74
75
76
		if (this.state === 'expanded') {
			this.state = 'collapsed';
			this.navState.emit(this.state);

77
		} else {
mdsecurity's avatar
mdsecurity committed
78
79
			this.state = 'expanded';
			this.navState.emit(this.state);
80
81
		}
	}
mdsecurity's avatar
mdsecurity committed
82
83

}