nav-bar.component.ts 1.21 KB
Newer Older
mdsecurity's avatar
mdsecurity committed
1
import { Component, OnInit } from '@angular/core';
2
3
4
5
6
7
8
9
import {
  trigger,
  state,
  style,
  animate,
  transition,
  keyframes
} from '@angular/animations';
mdsecurity's avatar
mdsecurity committed
10
11
12
@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  styleUrls: ['./nav-bar.component.scss'],
  animations: [
    trigger('toggle-large-bar', [
      state('expanded', style({
		transform: 'translateY(0px)'
      })),
      state('collapsed',   style({
		transform: 'translateY(-400px)'
      })),
      transition('expanded => collapsed', animate('300ms cubic-bezier(.35,0,.61,1)')),
      transition('collapsed => expanded', animate('300ms ease-in-out'))
    ]),
    trigger('toggle-small-bar', [
      state('expanded', style({
      })),
      state('collapsed',   style({
      })),
      transition('expanded => collapsed', animate('300ms 270ms ease-out')),
      transition('collapsed => expanded', animate('300ms ease-out'))
   ])
  ]
mdsecurity's avatar
mdsecurity committed
34
})
35
36
  export class NavBarComponent implements OnInit {
	expanded:string = 'collapsed';
mdsecurity's avatar
mdsecurity committed
37
38
39
40
  constructor() { }

  ngOnInit() {
  }
41
42
43
44
45
46
47
48
  toggleState():void{
	  if(this.expanded === 'expanded'){
		  this.expanded = 'collapsed';
	  }else{
		  this.expanded = 'expanded';
	  }
	console.log('something happened')
  }
mdsecurity's avatar
mdsecurity committed
49
50

}