i use facing a issue in qml button

[saivineeth]

i was try to create a button in bottom menu but i was facing a issue if i clicked a rect mouse area then the text is changing if i clicked the changed another function is working i need a help how solve the issue if i clicked gain then only gain options should be visible then if i clicked back every thing should be normal and also in gain if i click 1x then how to integrated with another qml file

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
width: 1920
height: 1080
visible: true
title: qsTr("Hello World")
Rectangle{
    width: parent.width
    height: parent.height*0.1
    anchors.bottom: parent.bottom
    color:"#D9D9D9"
    Rectangle{

        id:back
        height:parent.height
        width:parent.width/6
        color: "#D9D9D9"
        border.width:1.5
        border.color:"#b9bab8"
        anchors.left: parent.left
        MouseArea{
            anchors.fill:parent
            hoverEnabled:true
            onEntered: {
                back.color="#aba9a9"

            }
            onExited: {
                back.color="#D9D9D9"

            }
            onClicked: {

                gain.border.width=1
                 speed.border.width=1
                 filter.border.width=1
                 lead.border.width=1
                 setting.border.width=1
                gaintxt.text="Gain"
                speedtxt.text="Speed"
                filtertxt.text="Filter"
                leadtxt.text="Lead"
                settingtxt.text="Settings"
                btn()
            }
        }
        Text {
            id: backtxt
            text: qsTr("Back")
            font.pixelSize: 25
            font.family: nunito.name
            anchors.centerIn:parent
        }

    }

        Rectangle{

            id:gain
            height:parent.height
            width:parent.width/6
            color: "#D9D9D9"
            anchors.left: back.right
            state: "gain"
            border.width:1.5
            border.color:"#b9bab8"

            MouseArea{
                anchors.fill:parent
                hoverEnabled:true
                onEntered: {
                    gain.color="#aba9a9"
                }
                onExited: {
                    gain.color="#D9D9D9"
                }


                onClicked: {
                    parent.border.width=3
                    speedtxt.text="1x(mm/mv)"
                    filtertxt.text="2x(mm/mv)"
                    leadtxt.text="3x(mm/mv)"
                    settingtxt.text="4x(mm/mv)"
                    gaintxt.font.bold = true
                    gaintxt.color = "#001E60"
                    //gain.state = (gain.state == "gain" ? "back" : "gain")



            }
            Text {
                id: gaintxt
                text: qsTr("Gain")
                font.family: nunito.name
                font.pixelSize: 25
                anchors.centerIn:parent

            }
    }
        Rectangle{
            id:speed
            height:parent.height
            width:gain.width
            color: "#D9D9D9"
            anchors.left: gain.right
            border.width:1.5
            border.color: "#b9bab8"
            MouseArea{
                anchors.fill:parent
                hoverEnabled:true
                onEntered: {
                    speed.color="#aba9a9"
                }
                onExited: {
                    speed.color="#D9D9D9"
                }
                onClicked: {
                    parent.border.width=3
                    gaintxt.text="Speed"
                    speedtxt.text="5"
                    filtertxt.text="10"
                    leadtxt.text="25"
                    settingtxt.text="50"
                    gaintxt.font.bold = true
                    gaintxt.color = "#001E60"

                }
            }
            Text {
                id: speedtxt
                text: qsTr("Speed")
                font.pixelSize: 25
                font.family: nunito.name
                anchors.centerIn:parent
            }
    }

        Rectangle{
        id:filter
        height:parent.height
        width:gain.width
        color: "#D9D9D9"
        anchors.left: speed.right
        border.width:1.5
        border.color:"#b9bab8"
        MouseArea{
            id:filtermouse
            anchors.fill:parent
            hoverEnabled:true
            onEntered: {
                filter.color="#aba9a9"
            }
            onExited: {
                filter.color="#D9D9D9"
            }
            onClicked: {
                parent.border.width=3
                gaintxt.text="Filter"
                speedtxt.text="20"
                filtertxt.text="40"
                leadtxt.text="100"
                settingtxt.text="150"
                gaintxt.font.bold = true
                gaintxt.color = "#001E60"
            }
        }
        Text {
            id: filtertxt
            text: qsTr("Fliter")
            font.pixelSize: 25
            font.family: nunito.name
            anchors.centerIn:parent
        }

}
        Rectangle{
        id:lead
        height:parent.height
        width:gain.width
        color: "#D9D9D9"
        anchors.left: filter.right
        border.width:1.5
        border.color:"#b9bab8"
        MouseArea{
            anchors.fill:parent
            hoverEnabled:true
            onEntered: {
                lead.color="#aba9a9"
            }
            onExited: {
                lead.color="#D9D9D9"
            }
            onClicked: {
                parent.border.width=3
                gaintxt.text="Lead"
                speedtxt.text="3"
                filtertxt.text="6"
                leadtxt.text="12"
                settingtxt.text=""
                gaintxt.font.bold = true
                gaintxt.color = "#001E60"

            }
        }
        Text {
            id: leadtxt
            text: qsTr("Lead")
            font.family: nunito.name
            font.pixelSize: 25
            anchors.centerIn:parent
        }

}
        Rectangle{
        id:setting
        height:parent.height
        width:gain.width
        color: "#D9D9D9"
        anchors.left: lead.right
        border.width:1.5
        border.color: "#b9bab8"
        MouseArea{
            anchors.fill:parent
            hoverEnabled:true
            onEntered: {
                setting.color="#aba9a9"
            }
            onExited: {
                setting.color="#D9D9D9"
            }
            onClicked: {
                parent.border.width=3
                settingtxt.font.bold = true
                settingtxt.color = "#001E60"
            }
        }
        Text {
            id: settingtxt
            text: qsTr("Settings")
            font.family: nunito.name
            font.pixelSize: 25
            anchors.centerIn:parent


        }

}



}
}
}