Working burger

component.ts

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


// @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 class="hamburger-line"></div>
                <div class="hamburger-line"></div>
                <div 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

    closeHoverOut = false

    @Input() enlarge = 1

    @HostListener("mousedown")
    onMouseDown() {
        this.toggle()
    }

    @HostListener("mouseleave")
    onMouseOut() {
        this.toggleHoverClose()
    }

    @HostListener("mouseenter")
    onMouseEnter() {
        this.toggleHoverClose()
    }



    @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 {
        let transform = `scale(${this.enlarge})`
        if (this.closeHoverOut) {
            transform += " rotate(90deg)"
            this.closeHoverOut = true
        } else {
            transform = `scale(${this.enlarge})`
        }
        return transform
    }

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

    toggle(): void {
        this.closed = !this.closed
    }


    // @HostBinding("style.transform")
    // get rotationCloseButton(): string {
    //     return "rotate(90deg)"
    // }


    toggleHoverClose(): void {
        if (!this.closed) {
            this.closeHoverOut = false
            return
        }
        if (this.closeHoverOut) {
            this.closeHoverOut = false
            return
        }
        this.closeHoverOut = true
    }

    @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)
    }
}