CuboBmsTool/qml/MainWindow.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

import Controls 1.0 as Controls
import Screens 1.0 as Screens
import Utils 1.0

ApplicationWindow {
    id: window
    title: qsTr("Cubo Verde BMS Tool")
    width: 1366
    height: 768
    visible: true

    RowLayout {
        anchors.fill: parent
        spacing: 0

        Rectangle {
            id: pane
            color: Palette.alternativeBackgroundColor
            implicitWidth: 300

            property bool minimized: false

            ColumnLayout {
                anchors.fill: parent
                spacing: 0

                Item {
                    Layout.preferredHeight: 40
                }

                Image {
                    source: "qrc:/Icons/cubo-logo.svg"
                    sourceSize.width: pane.minimized ? 80 : 115
                    sourceSize.height: pane.minimized ? 80 : 115
                    fillMode: Image.PreserveAspectFit
                    Layout.alignment: Qt.AlignCenter
                }

                Item {
                    Layout.preferredHeight: pane.minimized ? 75 : 40
                }

                ItemDelegate {
                    leftPadding: pane.minimized ? 0 : 40

                    contentItem: RowLayout {
                        height: 50
                        spacing: 25

                        Item {
                            visible: pane.minimized
                            Layout.fillWidth: true
                        }

                        Image {
                            source: "qrc:/Icons/hide-menu.svg"
                            fillMode: Image.PreserveAspectFit
                            mirror: pane.minimized
                            Layout.alignment: Qt.AlignCenter
                        }

                        Label {
                            text: qsTr("Hide menu")
                            color: Palette.alternativeTextColor
                            visible: !pane.minimized
                        }

                        Item {
                            Layout.fillWidth: true
                        }
                    }

                    background: Rectangle {
                        color: "transparent"
                    }

                    onClicked: if (pane.implicitWidth === 300) {
                                   animation.from = 300
                                   animation.to = 100
                                   animation.running = true
                                   pane.minimized = true
                               } else {
                                   animation.from = 100
                                   animation.to = 300
                                   animation.running = true
                                   pane.minimized = false
                               }

                    Layout.preferredHeight: 52
                    Layout.fillWidth: true
                }

                Item {
                    Layout.preferredHeight: 70
                }

                ListView {
                    id: menuView
                    model: [
                        {"text": qsTr("AKB monitor"), "icon": "qrc:/Icons/akb-monitor.svg"},
                        {"text": qsTr("Cell monitor"), "icon": "qrc:/Icons/cell-monitor.svg"},
                        {"text": qsTr("Configuration"), "icon": "qrc:/Icons/bms-configuration.svg"},
                        {"text": qsTr("Visualization"), "icon": "qrc:/Icons/visualization.svg"},
                        {"text": qsTr("History"), "icon": "qrc:/Icons/history.svg"},
                        {"text": qsTr("BMS service"), "icon": "qrc:/Icons/bms-service.svg"},
                        {"text": qsTr("Exit"), "icon": "qrc:/Icons/exit.svg"},
                    ]

                    delegate: ItemDelegate {
                        id: menuDelegate
                        width: ListView.view.width
                        height: 52
                        leftPadding: pane.minimized ? 0 : 40
                        highlighted: ListView.isCurrentItem
                        onClicked: menuView.currentIndex = index

                        contentItem: RowLayout {
                            spacing: pane.minimized ? 0 : 25
                            height: 50

                            Item {
                                visible: pane.minimized
                                Layout.fillWidth: true
                            }

                            Image {
                                source: modelData.icon
                                fillMode: Image.PreserveAspectFit
                                Layout.alignment: Qt.AlignCenter
                            }

                            Label {
                                text: modelData.text
                                font.weight: Font.ExtraBold
                                color: Palette.alternativeTextColor
                                visible: !pane.minimized
                            }

                            Item {
                                Layout.fillWidth: true
                            }
                        }

                        background: Rectangle {
                            color: menuDelegate.highlighted ? Palette.pressedButtonColor : Palette.alternativeButtonColor
                        }
                    }

                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
            }

            PropertyAnimation {
                id: animation
                target: pane
                property: "implicitWidth"
                duration: 200
                easing.type: Easing.InQuad
            }

            Layout.preferredWidth: implicitWidth
            Layout.fillHeight: true
        }

        ColumnLayout {
            RowLayout {
                id: topBar

                property var labels: [
                    qsTr("AKB Monitor"),
                    qsTr("Cell Monitor"),
                ]

                Label {
                    text: topBar.labels[stack.currentIndex]
                    font.pixelSize: 38
                    font.weight: Font.ExtraBold
                }

                Item {
                    Layout.fillWidth: true
                }

                Layout.leftMargin: 45
                Layout.rightMargin: 45
            }

            StackLayout {
                id: stack
                currentIndex: menuView.currentIndex

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.leftMargin: 45
                Layout.rightMargin: 45

                Screens.AkbMonitorScreen {
                }

                Screens.CellMonitorScreen {
                }
            }
        }
    }

    Screens.ConnectionScreen {
        id: connectionScreen
    }

    background: Rectangle {
        color: Palette.screenBackgroundColor
    }

    Component.onCompleted: connectionScreen.open()
}