components/MenuBackButton.qml

import QtQuick 2.15

Item {
    id: root

    width: 40
    height: 40

    property double iconMarigns: 8
    property double iconHeight: width - iconMarigns * 2
    signal clicked()
    signal back()

    SystemPalette {
        id: palette
    }

    MouseArea {
        id: ma

        anchors.fill: parent
    }

    Rectangle {
        id: bar1
        x: root.iconMarigns
        y: root.iconMarigns + root.iconHeight / 6
        width: root.iconHeight
        height: root.iconHeight / 9
        antialiasing: true

        color: palette.button
    }

    Rectangle {
        id: bar2
        x: root.iconMarigns
        y: root.iconMarigns + root.iconHeight / 2 - height / 2
        width: root.iconHeight
        height: root.iconHeight / 9
        antialiasing: true

        color: palette.button
    }

    Rectangle {
        id: bar3
        x: root.iconMarigns
        y: root.iconMarigns + root.iconHeight / 2 + height * 2
        width: root.iconHeight
        height: root.iconHeight / 9
        antialiasing: true

        color: palette.button
    }

    property int animationDuration: 450

    state: "menu"
    states: [
        State {
            name: "menu"
            PropertyChanges { ma.onClicked: root.clicked() }
        },

        State {
            name: "back"
            PropertyChanges { root.rotation: 180 }
            PropertyChanges { bar1.rotation: 45;
                              bar1.width: root.iconHeight / 3 * 2;
                              bar1.x: root.iconMarigns + root.iconHeight / 2;
                              bar1.y: root.iconMarigns + root.iconHeight / 4 }
            PropertyChanges { bar2.width: root.iconHeight / 6 * 5 + 1;
                              bar2.x: root.iconMarigns + root.iconHeight / 9 }
            PropertyChanges { bar3.rotation: -45;
                              bar3.width: root.iconHeight / 3 * 2;
                              bar3.x: root.iconMarigns + root.iconHeight / 2;
                              bar3.y: root.iconMarigns + root.iconHeight / 3 * 2 }
            PropertyChanges { ma.onClicked: root.back() }
        },

        State {
            name: "hidden"
            PropertyChanges { ma.enabled: false }
            PropertyChanges { root.opacity: 0 }
        }
    ]

    transitions: [
        Transition {
            from: "hidden"; to: "*"
            SequentialAnimation
            {
                PropertyAction { targets: [root, bar1, bar2, bar3]; properties: "rotation, width, x, y" }
                NumberAnimation { target: root; property: "opacity"; duration: root.animationDuration; easing.type: Easing.InOutQuad }
            }
        },

        Transition {
            from: "*"; to: "hidden"
            SequentialAnimation
            {
                NumberAnimation { target: root; property: "opacity"; duration: root.animationDuration; easing.type: Easing.InOutQuad }
                PropertyAction { targets: [root, bar1, bar2, bar3]; properties: "rotation, width, x, y" }
            }
        },

        Transition {
            from: "menu"; to: "back"
            RotationAnimation { target: root; direction: RotationAnimation.Clockwise; duration: root.animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { targets: [bar1, bar2, bar3]; properties: "rotation, width, x, y"; duration: root.animationDuration; easing.type: Easing.InOutQuad }
        },

        Transition {
            from: "back"; to: "menu"
            RotationAnimation { target: root; direction: RotationAnimation.Counterclockwise; duration: root.animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { targets: [bar1, bar2, bar3]; properties: "rotation, width, x, y"; duration: root.animationDuration; easing.type: Easing.InOutQuad }
        }
    ]
}