import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: settingsPanel
    x: -width
    width: parent.width / 4

    property bool isSlideOut: settingsPanel.state == "slideOut"

    Behavior on x { PropertyAnimation {} }

    function toggleSlide() {
        if (isSlideOut) {
            state = "slideIn";
        } else {
            state = "slideOut"
        }
        return isSlideOut;
    }

    states: [
        State {
            name: "slideOut"
            PropertyChanges { target: settingsPanel; x: 0 }
        },
        State {
            name: "slideIn"
            PropertyChanges { target: settingsPanel; x: -width }
        }
    ]
}

            Button {
                checkable: true
                checked: false

                onCheckedChanged: {
                    settingsPanel.toggleSlide()
                }
            }

    SettingsPanel {
        id: settingsPanel
        anchors { top: parent.top; bottom: parent.bottom; topMargin: 1 }
    }