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 { target: ma; onClicked: root.clicked() }
        },

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

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