import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    id: root
    property int currentSection : 1
    signal sectionChanged(int sectionIndex)

    ListModel {
        id: nav_model
        ListElement { name: qsTr("Info"); sectionIndex: 0 }
        ListElement { name: qsTr("Apps"); sectionIndex: 1 }
        ListElement { name: qsTr("Gallery"); sectionIndex: 2 }
        ListElement { name: qsTr("Files"); sectionIndex: 3 }
    }

    implicitWidth: 200
    // contentHeight : 40 * 4 + 40

    Item {
        anchors.fill: parent

        ListView {
            id: nav_list
            anchors.fill: parent
            anchors.margins : 10
            clip: true
            spacing : 5

            model: nav_model
            interactive: false
            boundsBehavior: ListView.StopAtBounds
            currentIndex : root.currentSection
            delegate: Button {
                text: name
                width: nav_list.width
                height: 40
                // verticalPadding: 5
                // horizontalPadding:20
                background : Rectangle {
                    color : {
                        if (nav_list.currentIndex == index) {
                            return "blue"
                        }
                        if (hovered) {
                            return "red"
                        }

                        return "transparent"
                    }
                    radius : 4

                }
                onClicked : {
                    nav_list.currentIndex = index
                    root.sectionChanged(sectionIndex)
                }
            }
        }
    }
}