Hamburger icon angular animations

component.ts

import {
    Component,
    OnInit,
    Input,
    HostBinding,
    HostListener,
} from "@angular/core"

import {
    animateChild,
    query,
    group,
    style,
    animate,
    trigger,
    state,
    transition,
    sequence
} from "@angular/animations"



// export const topLine = trigger("topLine", [

//     state(
//         "toCloseState",
//         style({
//             transform: "translateY(-50%) rotate(45deg)",
//             top: "50%",
//             width: "100%",
//             backgroundColor: "black"
//          })
//     ),
//     state(
//         "toOpenState",
//         style({
//             transform: "translateY(0%) rotate(0deg)",
//             top: "0%",
//             width: "100%",
//             backgroundColor: "black"
// })
//     ),



//     transition("toOpenState => toCloseState", [
//         sequence([
//             animate("200ms 45ms ease",
//                 style({
//                             transform: "translateY(-50%)",
//                             top: "50%",
//                             width: "100%",
//                             backgroundColor: "black"
//                 })
//             ),
//             animate("200ms 45ms ease",
//                 style({
//                             transform: "translateY(-50%) rotate(45deg)",
//                             top: "50%",
//                             width: "100%",
//                             backgroundColor: "black"
//                 })
//             )
//         ])
//     ]),

//     transition("toCloseState => toOpenState", [
//         sequence([
//             animate("200ms 45ms ease",
//                 style({
//                             transform: "translateY(-50%) rotate(0deg)",
//                             top: "50%",
//                             width: "100%",
//                             backgroundColor: "black"
//                 })
//             ),
//             animate("200ms 45ms ease",
//                 style({
//                             transform: "translateY(0%) rotate(0deg)",
//                             top: "0%",
//                             width: "100%",
//                             backgroundColor: "black"
//                 })
//             ),
//         ])
//     ])

// ])



// export const middleLine = trigger("middleLine", [

//     state(
//         "toCloseState",
//         style({
//             width: "0%",
//          })
//     ),

//     transition("toOpenState => toCloseState", [
//         sequence([
//             animate("200ms 45ms ease",
//                 style({
//                             width: "100%",
//                 })
//             ),
//         ])
//     ])

// ])



// export const bottomLine = trigger("bottomLine", [

//     state(
//         "toCloseState",
//         style({
//             transform: "translateY(-50%) rotate(-45deg)",
//             top: "50%",
//             width: "100%",
//          })
//     ),

//     transition("toOpenState => toCloseState", [
//         sequence([
//             animate("200ms 45ms ease",
//                 style({
//                             transform: "translateY(-50%)",
//                             top: "50%",
//                             width: "100%"
//                  })
//             ),
//             animate("200ms 45ms ease",
//                 style({
//                             transform: "translateY(-50%) rotate(-45deg)",
//                             top: "50%",
//                             width: "100%",
//                 })
//             )
//         ])
//     ])

// ])



// @Input
// --- scale: number // proportianal scale
// --- enlarge: number // transform: scale({enlarge})
// --- width: number
// --- height: number

@Component({
    selector: "ng-hamburger",
    template: `
        <div class="container">
            <div class="hamburger">
                <div [@topLine]="status" class="hamburger-line"></div>
                <div [@middleLine]="status" class="hamburger-line"></div>
                <div [@bottomLine]="status" class="hamburger-line"></div>
            </div>
        </div>
    `,
    styleUrls: ["./ng-hamburger.component.sass"],
    // animations: [topLine, middleLine, bottomLine],
})
export class NgHamburgerComponent implements OnInit {
    _scale: number = 1
    _width: number = 25
    _height: number = 18

    status = "toOpenState"

    @Input() enlarge = 1

    @HostListener("mousedown")
    onClick() {
        this.toggle()


    }



    @HostBinding("style.width")
    get widthPx(): string {
        return this._width + "px"
    }

    @HostBinding("style.height")
    get heightPx(): string {
        return this._height + "px"
    }

    @HostBinding("style.transform")
    get transformScale(): string {
        return `scale(${this.enlarge})`
    }

    @HostBinding("class.close")
    @Input()
    close: boolean = false

    toggle(): void {
        this.close = !this.close
        this.status = this.close ? "toCloseState" : "toOpenState"
    }

    @Input()
    set width(value) {
        this._width = value * this._scale
    }

    get width(): number {
        return this._width
    }

    @Input()
    set height(value) {
        this._height = value * this._scale
    }

    get height(): number {
        return this._height
    }

    @Input()
    set scale(value) {
        this._height = value * this._height
        this._width = value * this._width
        this._scale = value
    }

    get scale(): number {
        return this._scale
    }

    constructor() {}

    ngOnInit(): void {
        console.log(this.scale, this.height)
    }
}