QML pop-up frame, customizable

import QtQuick 2.0
import Material 0.2 as M
import QtQuick.Layouts 1.12
import QtQml 2.12

Item {
    
    id: root
    anchors.fill: parent
    visible: false
    property var tabModel: [" page 1", " page 2", " page 3"]  // tab  title 
    property var tabDetail: [cb0, cb, cb2] //  Components ID
    property var tabFilter: [0, 1]//, 2] //  To show tab The index of the value 
    property int currentIndex: 0
    property string mainColor: M.Theme.primaryColor

    onVisibleChanged: {
    
        if(!visible){
    
            currentIndex = 0
        }else{
    
            mainDlg.state = "show"
        }
    }

    Behavior on visible {
    
        enabled: visible
        NumberAnimation {
    
            duration: 400
        }
    }
    onCurrentIndexChanged: {
    
    }
    MouseArea{
    
        anchors.fill: parent
    }

    Component{
    
        id: cb0
        Item{
    
            anchors.fill: parent
            
        }
    }

    Component{
    
        id: cb1
        Item{
    
            anchors.fill: parent
            
        }
    }

    Component{
    
        id: cb2
        Item{
    
            anchors.fill: parent
        
        }
    }

    Rectangle{
    
        anchors.fill: parent
        color: "#30000000"
        MouseArea{
    
            anchors.fill: parent
            onClicked: {
    
                mainDlg.scale = 1.2
            }
        }
    }

    Rectangle{
    
        id: dlgBaseline
        height: 1
        width: parent.width
        anchors.top: parent.top
        anchors.topMargin: parent.height / 10
        color: "transparent"
    }

    Rectangle{
    
        id: mainDlg
        width: parent.width / 5 * 4
        height: parent.height / 5 * 4
        anchors.top: parent.bottom
        anchors.left: parent.left
        anchors.leftMargin: width / 10
        radius: M.Units.dp(10)
        Behavior on scale {
    
            SequentialAnimation{
    
                NumberAnimation{
    
                    from: 1
                    to: 1.1
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation{
    
                    from: 1.1
                    to: 0.95
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation{
    
                    from: 0.95
                    to: 1
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }
        states: [
            State{
    
                name: "show"
                AnchorChanges{
    
                    target: mainDlg
                    anchors.top: dlgBaseline.bottom
                }
            },
            State{
    
                name: "hide"
                AnchorChanges{
    
                    target: mainDlg
                    anchors.top: root.bottom
                }
            }
        ]
        transitions: Transition {
    
            AnchorAnimation{
    
                duration: 200
            }
        }
        MouseArea{
    
            anchors.fill: parent
        }

        M.View{
     //  The title bar 
            id: tabTitle
            width: parent.width
            height: M.Units.dp(60)
            backgroundColor:  mainColor
            radius: M.Units.dp(10)
            Rectangle{
    
                height: parent.height / 2
                width: parent.width
                color: mainColor
                anchors.bottom: parent.bottom
            }
            M.Label{
    
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                text: " Test pop up "
                color: "white"
                font.pixelSize: M.Units.dp(30)
                font.bold: true
            }
            M.View{
     //  close button 
                width: M.Units.dp(40)
                height: width
                radius: width / 2
                elevation: 1
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.margins: M.Units.dp(10)
                backgroundColor: "white"
                M.Icon{
    
                    width: parent.width / 3
                    height: width
                    anchors.centerIn: parent
                    source: Qt.resolvedUrl("images/close.svg")
                }

                M.Ink{
    
                    anchors.fill: parent
                    circular: true
                    onClicked: {
    
                        playSound()
                        if(dmTabDetail.item.working){
    
                            return
                        }
                        root.visible = false
                        mainDlg.state = "hide"
                    }
                }
            }
        }
        M.View{
     //  The navigation bar 
            id: tabNavigate
            width: parent.width / 5
            anchors.left: parent.left
            anchors.top: tabTitle.bottom
            anchors.bottom: parent.bottom
            radius: M.Units.dp(10)
            backgroundColor: "white"
            M.View{
     //  Scroll bar 
                width: M.Units.dp(10)
                height: parent.height
                anchors.right: parent.right
                backgroundColor: "lightgray"
                radius: width / 2
                M.View{
    
                    id: flickkkk
                    width: parent.width / 3 * 2
                    height: flickList.height / flickList.contentHeight * parent.height
                    anchors.horizontalCenter: parent.horizontalCenter
                    radius: width / 2
                    backgroundColor: "gray"
                    property int scrolly: flickList.contentY / (flickList.contentHeight - flickList.height) * (parent.height - height)
                    y: scrolly
                }
            }

            Flickable{
    
                id: flickList
                anchors.fill: parent
                anchors.bottomMargin: M.Units.dp(5)
                clip: true
                contentHeight: dmTabView.height + M.Units.dp(5)
                Column{
    
                    id: dmTabView
                    width: parent.width - M.Units.dp(10)
                    anchors.top: parent.top
                    anchors.topMargin: M.Units.dp(5)
                    spacing: M.Units.dp(5)
                    Repeater{
    
                        id: dmTabVieList
                        model: tabModel.filter(function(r, index){
     if(tabFilter.indexOf(index) != -1) return true })
                        delegate: M.View {
    
                            width: root.currentIndex == index? parent.width - M.Units.dp(5): parent.width - M.Units.dp(10)
                            height: root.currentIndex == index? M.Units.dp(60): M.Units.dp(50)
                            anchors.horizontalCenter: parent.horizontalCenter
                            elevation: root.currentIndex == index? 1: 0
                            backgroundColor: Qt.darker(mainColor, root.currentIndex == index? 1.5: 1)
                            radius: M.Units.dp(5)
                            M.Label{
    
                                anchors.fill: parent
                                anchors.leftMargin: M.Units.dp(15)
                                text: modelData
                                color: root.currentIndex == index? "white": "#2f2f2f"
                                font.pixelSize: M.Units.dp(20)
                                verticalAlignment: Text.AlignVCenter
                            }
                            M.Label{
    
                                visible: root.currentIndex == index
                                anchors.right: parent.right
                                anchors.rightMargin: M.Units.dp(15)
                                anchors.verticalCenter: parent.verticalCenter
                                text: ">"
                                font.bold: true
                                font.pixelSize: M.Units.dp(30)
                                color: "white"
                            }

                            M.Ink{
    
                                anchors.fill: parent
                                onClicked: {
    
                                    if(dmTabDetail.item.working){
    
                                        return
                                    }
                                    root.currentIndex = index
                                }
                            }
                        }
                    }
                }
            }
        }
        M.View{
     //  Detail column 
            anchors.left: tabNavigate.right
            anchors.right: parent.right
            anchors.top: tabTitle.bottom
            anchors.bottom: parent.bottom
            anchors.leftMargin: M.Units.dp(5)
            Loader{
    
                id: dmTabDetail
                anchors.fill: parent
                anchors.margins: M.Units.dp(10)
                sourceComponent: tabDetail[currentIndex]
            }
        }
    }
    function show(){
    
        root.visible = true
    }
    function hide(){
    
        root.visible = false
    }

}