pyqcrm/Gui/TopBar.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

RowLayout
{
    id: topBar
    spacing: 0
    height: 35
    width: parent.width
    anchors
    {
        top: parent.top
        left: parent.left


    }

    Button
    {
        id: dashBoard
        flat: true
        text: qsTr("Dashboard")
        implicitWidth: abrechnung.implicitContentWidth + 10
        Layout.margins: 3
        background: Rectangle
        {
            border.width: dashBoard.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient
            {
                GradientStop { position: 0 ; color: dashBoard.pressed ? "#000" : "#001" }
                GradientStop { position: 1 ; color: dashBoard.pressed ? "#100" : "#000" }
            }
        }
        onClicked:
        {
            appLoader.source = "Dashboard.qml"
        }
    }

    Button
    {
        id: kunden
        flat: true
        text: qsTr("Kunden")
        implicitWidth: abrechnung.implicitContentWidth + 10
        Layout.margins: 3
        background: Rectangle
        {
            border.width: kunden.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient
            {
                GradientStop { position: 0 ; color: kunden.pressed ? "#000" : "#001" }
                GradientStop { position: 1 ; color: kunden.pressed ? "#100" : "#000" }
            }
        }
        onClicked:
        {
            // TODO: here we should call the model
            appLoader.source = "CustomerTable.qml"
        }
    }

    Button
    {
        id: objekt
        flat: true
        text: qsTr("Objekt")
        implicitWidth: abrechnung.implicitContentWidth + 10
        Layout.margins: 3
        background: Rectangle
        {
            border.width: objekt.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient
            {
                GradientStop { position: 0 ; color: objekt.pressed ? "#000" : "#001" }
                GradientStop { position: 1 ; color: objekt.pressed ? "#100" : "#000" }
            }
        }
        onClicked:
        {
            appLoader.source = "ObjectTable.qml"
        }

    }

    Button
    {
        id: mitarbeiter
        flat: true
        text: qsTr("Mitarbeiter")
        implicitWidth: abrechnung.implicitContentWidth + 10
        Layout.margins: 3
        background: Rectangle
        {
            border.width: mitarbeiter.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient
            {
                GradientStop { position: 0 ; color: mitarbeiter.pressed ? "#000" : "#001" }
                GradientStop { position: 1 ; color: mitarbeiter.pressed ? "#100" : "#000" }
            }
        }
        onClicked:
        {
            appLoader.source = "EmployeeTable.qml"
        }
    }

    Button
    {
        id: abrechnung
        flat: true
        text: qsTr("Abrechnung")
        implicitWidth: abrechnung.implicitContentWidth + 10
        Layout.margins: 3
        background: Rectangle
        {
            border.width: abrechnung.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient
            {
                GradientStop { position: 0 ; color: abrechnung.pressed ? "#000" : "#001" }
                GradientStop { position: 1 ; color: abrechnung.pressed ? "#100" : "#000" }
            }
        }
    }

    Item
    {
        id: hspacer
        Layout.fillWidth: true
    }

    Button
    {
        id: atajos
        icon.source: "qrc:/images/menu.svg"
        icon.color: "red"
        flat: true
        Layout.rightMargin: 9
    }

}