Inserting text in the MenuBar of QML

These menus by default appear on the left side. I want to place some text on the left side before the menu starts appearing.

How to push the menus to right in order to create space for the text in the menubar?

I want the following:

That text “AmplifyRemote” is appearing before the menu starts. How to achieve that here?

ApplicationWindow
{
    id: window; visible: true; width: Screen.width; height: Screen.height; flags: Qt.FramelessWindowHint

    menuBar:
      MenuBar
      {
        id: menuBar

        Menu { title: qsTr("File") }
        Menu { title: qsTr("Edit") }
        Menu { title: qsTr("View") }
        Menu { title: qsTr("Help") }

        delegate: MenuBarItem {
            id: menuBarItem

            font
            {
                pointSize: decoration.font_size_8
                family: decoration.font_family
            }
            contentItem: Text {
                text: menuBarItem.text
                font: menuBarItem.font
                opacity: enabled ? 1.0 : 0.3
                color: menuBarItem.highlighted ? "white":"#3F3F3F"
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
                implicitWidth: 40
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                color: menuBarItem.highlighted ? "#292a38" : "transparent"
            }
        }

        background: Rectangle {
            implicitWidth: 40
            implicitHeight: 11
            color: "#d2d2d2"

            // This is the text I want before menus start
            Text{ text:"jjjjjjjjj"; anchors.left: parent.left}    

            Rectangle {
                color: "#21be2b"
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
            }
        }
    }
}

Answer

It’s possible there are prettier solutions, but it can work by adding a special Menu item to the front of your list that is disabled.

MenuBar {
    id: menuBar

    Menu { title: "jjjjjjjj" }
    Menu { title: qsTr("File") }
    Menu { title: qsTr("Edit") }
    Menu { title: qsTr("View") }
    Menu { title: qsTr("Help") }

    delegate: MenuBarItem {
        id: menuBarItem

        enabled: text !== "jjjjjjjj"
    }
}

Advertisement

Answer