ScrollView

        Rectangle {
            id: mainCategories // mainCtegory
            color: "white"
            anchors.top: header.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            z: -10

            ScrollView {
                id: listLayout
                x: 0
                y: 0
                anchors.fill: parent
                property int numberCollapsed: -1

                ListView {
                    id: listViewLeft
                    x: 0
                    y: 0

                    property ListModel categoryListModel: ListModel {
                        id: leftCategories
                    }
                    delegate: categoryDelegateLeft
                }
            }
            //список
            Component {
                id: categoryDelegateLeft
                Column {
                    width: 600

                    Rectangle {
                        height: 50
                        width: 600

                        Text {
                            anchors.verticalCenter: parent.verticalCenter
                            x: 50
                            font.pixelSize: 16
                            font.family: "Droid sans"
                            text: title
                            color: "#325A81"
                            wrapMode: Text.WordWrap
                            MouseArea {
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor
                                onClicked: {
                                    funcCategoris.categoryId = product_category_id
                                    mainCategories.visible = false
                                    funcCategoris.visible = true
                                    funcCategoris.idCategory = product_category_id
                                    funcCategoris.setModel()
                                }
                            }
                        }

                        Image {
                            id: arrowImage
                            source: arrow
                            width: 30
                            height: 30
                            anchors.left: parent.left
                            anchors.leftMargin: 15
                            anchors.verticalCenter: parent.verticalCenter


                            MouseArea {
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor
                                // Toggle the 'collapsed' property
                                onClicked: {
                                    listViewLeft.currentIndex = index
                                    leftCategories.setProperty(index,
                                                               "collapsed",
                                                               !collapsed)

                                    if (listLayout.numberCollapsed != -1
                                            && listLayout.numberCollapsed != index) {
                                        leftCategories.setProperty(
                                                    listLayout.numberCollapsed,
                                                    "collapsed", !collapsed)
                                        leftCategories.setProperty(
                                                    listLayout.numberCollapsed,
                                                    "arrow", "content/arrow_down.png")
                                        arrowImage.source = "content/arrow_down.png"
                                        listLayout.numberCollapsed = index
                                    }
                                    if (listLayout.numberCollapsed == -1) {
                                        listLayout.numberCollapsed = index
                                    }

                                    if (listLayout.numberCollapsed == index) {
                                        if (!collapsed) {
                                            parent.source = "content/arrow_up.png"
                                        } else {
                                            parent.source = "content/arrow_down.png"
                                        }
                                    }
                                }
                            }
                        }
                    }

                    Loader {
                        id: subItemLoaderLeft
                        onVisibleChildrenChanged: {
                            arrowImage.source = arrow
                        }

                        // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null
                        // the Loader element retains the same height it had when sourceComponent was set. Setting visible
                        // to false makes the parent Column treat it as if it's height was 0.
                        visible: !collapsed
                        property variant subItemModel: subItems
                        sourceComponent: collapsed ? null : subItemColumnDelegate
                        onStatusChanged: if (status == Loader.Ready) {
                                             item.model = subItemModel
                                         }

                    }
                }
            }

            Component {
                id: subItemColumnDelegate
                Column {
                    property alias model: subItemRepeater.model
                    width: 384
                    Repeater {
                        id: subItemRepeater
                        delegate: Rectangle {
                            x: 10
                            height: 30
                            width: 670

                            Text {
                                anchors.verticalCenter: parent.verticalCenter
                                x: 30
                                width: 670
                                height: 30
                                font.pixelSize: 14
                                font.family: "Droid sans"
                                color: "#325A81"
                                text: title
                                wrapMode: Text.WordWrap
                                MouseArea {
                                    anchors.fill: parent
                                    cursorShape: Qt.PointingHandCursor
                                    onClicked: {
                                        console.log(product_category_id)
                                        mainCategories.visible = false
                                        prodCategoris.visible = true
                                        prodCategoris.setModel(
                                                    product_category_id)
                                    }
                                }
                            }
                        }
                    }
                }
            }
    }