main.qml

import QtQuick 6.4
import QtQuick.Controls 6.4
import QtQuick.Controls.Material as M
import QtQuick.Layouts

Rectangle {
    id: root
    width: 400
    height: 800
    color: "#EAEAEA"
    state: "vertical"


    M.Material.theme: M.Material.Light
    M.Material.accent: M.Material.Blue
    M.Material.primary: M.Material.Blue

    Image {
        id: qdsicon1
        width: 204
        height: 173
        anchors.top: parent.top
        source: "content/images/appicon.png"
        anchors.horizontalCenter: parent.horizontalCenter
        fillMode: Image.PreserveAspectFit

        Text {
            id: qdvLabel
            text: qsTr("Qt UI Viewer")
            anchors.top: parent.bottom
            font.pixelSize: 12
            anchors.topMargin: -22
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    Popup {
        property var popupCloseReceived : false
        id: popup
        anchors.centerIn: parent
        width: 300
        height: 100
        modal: true
        focus: true
        closePolicy: Popup.CloseOnEscape

        onClosed: {
            if (!popupCloseReceived) {
                backend.popupInterrupted();
            }
        }

        ColumnLayout {
            anchors.fill: parent
            Text {
                id: popupText
            }
            Item {
                id: name
            }
            ProgressBar {
                id: popupProgressBar
                Layout.fillWidth: true
                to: 100
            }
        }

        Connections {
            target: backend
            function onPopupOpen() {
                popup.open()
                popup.popupCloseReceived = false
            }
            function onPopupClose() {
                popup.popupCloseReceived = true
                popup.close()
            }
            function onPopupTextChanged(text) {
                popupText.text = text
            }
            function onPopupProgressIndeterminateChanged(status) {
                popupProgressBar.indeterminate = status
            }
            function onDownloadProgress(progress) {
                popupProgressBar.value = progress
            }
        }
    }

    StackLayout {
        id: stackLayout
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottomMargin: 10
        anchors.top: qdsicon1.bottom
        anchors.bottom: root.bottom
        anchors.rightMargin: 20
        anchors.leftMargin: 20
        anchors.topMargin: 10

        HomePage {
            id: homePage
            Layout.fillWidth: true
        }


        ExamplesPage {
            id: examplesPage
            Layout.fillWidth: true
        }

        Logs {
            id: logsPage
            Layout.fillWidth: true
        }

        Network {
            id: networkPage
            Layout.fillWidth: true
        }

        SettingsPage {
            id: settingsPage
            Layout.fillWidth: true
        }

        AboutHeader {
            id: headerPage
            Layout.fillWidth: true
        }
    }

    states: [
        State {
            name: "vertical"
            when: root.height >= 400

        },
        State {
            name: "horizontal"
            when: root.height < 400

            PropertyChanges {
                target: qdsicon1
                width: 132
                height: 83
            }

            PropertyChanges {
                target: qdvLabel
                anchors.topMargin: -8
            }

            PropertyChanges {
                target: stackLayout
                anchors.topMargin: 20
            }
        }
    ]


    Drawer {
        id: drawer
        width: 150
        height: root.height
        ScrollView {
            id: scrollview
            anchors.fill: parent

        ColumnLayout {
            id: column
            anchors.fill: drawer
            anchors.rightMargin: 10
            anchors.leftMargin: 10
            width: Math.max(implicitWidth, drawer.availableWidth)
            height: Math.max(implicitHeight, drawer.availableHeight)

            TabButton {
                id: home
                text: qsTr("Home")
                Layout.fillWidth: true
                checked: true
                checkable: true
                autoExclusive: true
                onClicked: {
                    stackLayout.currentIndex = 0
                    drawer.close()
                }
            }

            TabButton {
                id: examples
                text: qsTr("Examples")
                Layout.fillWidth: true
                checkable: true
                autoExclusive: true
                onClicked: {
                    stackLayout.currentIndex = 1
                    drawer.close()
                }
            }

            TabButton {
                id: logs
                text: qsTr("Logs")
                Layout.fillWidth: true
                checkable: true
                autoExclusive: true
                onClicked: {
                    stackLayout.currentIndex = 2
                    drawer.close()
                }
            }

            TabButton {
                id: network
                text: qsTr("Network")
                Layout.fillWidth: true
                checkable: true
                autoExclusive: true
                visible: true;
                onClicked: {
                    stackLayout.currentIndex = 3
                    drawer.close()
                }
            }

            TabButton {
                id: settings
                text: qsTr("Settings")
                Layout.fillWidth: true
                checkable: true
                autoExclusive: true
                onClicked: {
                    stackLayout.currentIndex = 4
                    drawer.close()
                }
            }

            TabButton {
                id: about
                text: qsTr("About")
                Layout.fillWidth: true
                checkable: true
                autoExclusive: true
                onClicked: {
                    stackLayout.currentIndex = 5
                    drawer.close()
                }
            }
        }
        }
     }

    Button {
        id: menuButon
        x: 8
        y: 8
        text: qsTr("Menu")
        Connections {
            target: menuButon
            function onClicked(){
                drawer.open();
            }
        }
    }
}