Creating A Sidebar Using QML

Saviz

Hi,
I am trying to create a sidebar in QML for fun. I really like the one that QC uses. So I tried to make it. I still haven't added any icons or text to my buttons.

Here is my QML code:

main.qml:

import QtQuick 2.15
import QtQuick.Controls 2.5
import QtQuick.Window 2.15

ApplicationWindow
{
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Inum")

    Rectangle
    {
        id: sidebarBackground
        visible: true
        width: 80
        height: Screen.height
        color: "#E4E4E4"
    }

    Column
    {
        anchors.fill: sidebarBackground
        SideButton{}
        SideButton{}
        SideButton{}
    }
}

SideButton.qml:

import QtQuick 2.15

// A custom button for the sidebar

Rectangle
{
    width: 80
    height: 80
    color: "#E4E4E4"

    Rectangle
    {
        id: left_Border
        visible: false
        width: 3
        height: 80
        color: "#5D5F61"
    }

    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true

        onEntered:
        {
            parent.color = "#CDCDCD"
        }

        onClicked:
        {
            parent.color = "#F6F6F6"
            left_Border.visible = true
        }

        onExited:
        {
            parent.color = "#E4E4E4"
            left_Border.visible = false
        }
    }
}

Here is a GIF showing the result:

As you can see it almost works. The issue is that after leaving the "MouseArea" the "onExited" method overwrites the "onClicked" method effect. I am stuck and I don't know what I can do about that because without this method I Can't undo the hover effect. I really want it to be more tab based like QC sidebar shown below:

Can anyone help me with this issue?

KroMignon

@Saviz said in Creating A Sidebar Using QML:

As you can see it almost works. The issue is that after leaving the "MouseArea" the "onExited" method overwrites the "onClicked" method effect. I am stuck and I don't know what I can do about that because without this method I Can't undo the hover effect. I really want it to be more tab based like QC sidebar shown below:

If you don't want to reset the click event when click is done then simply check if click is done:

onExited:
{
    if(! left_Border.visible)
        parent.color = "#E4E4E4"
}

Saviz

@KroMignon

Sorry for bothering you again, unfortunately it did not work.

Here is a GIF of what is happening:

Is there anything else that I can potentially do?

KroMignon

@Saviz said in Creating A Sidebar Using QML:

Is there anything else that I can potentially do?

I would suggest you to add ExclusiveGroup support to your SideButton component (cf. https://doc.qt.io/qt-5/qml-qtquick-controls-exclusivegroup.html#adding-support-to-exclusivegroup)

import QtQuick 2.15

// A custom button for the sidebar

Rectangle
{
    id: _rootItem
    
    implicitWidth: 80
    implicitHeight: 80

    // needed for exclusive group support
    property bool checked: false
    property ExclusiveGroup exclusiveGroup: null
    onExclusiveGroupChanged: {
        if (exclusiveGroup)
            exclusiveGroup.bindCheckable(_rootItem)
    }
    
    color: checked ? "#F6F6F6" : (mouseArea.hasHover ? "#CDCDCD" : "#E4E4E4")

    Rectangle {
        id: left_Border
        visible: _rootItem.checked
        width: 3
        height: _rootItem.height
        color: "#5D5F61"
    }

    MouseArea{
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        property bool hasHover: false

        onEntered: hasHover = true
        onExited: hasHover = false
        onClicked: _rootItem.checked = true;
    }
}

then in your main:

    Column
    {
        anchors.fill: sidebarBackground
        ExclusiveGroup { id: sideButton }
        SideButton { exclusiveGroup: sideButton }
        SideButton { exclusiveGroup: sideButton }
        SideButton { exclusiveGroup: sideButton }
    }

ODБOï

@Saviz said in Creating A Sidebar Using QML:

ethod overwrites the "onClicked" method effect.

here is a declarative way of implementing your Side Button, you might need adjust the behavior but this gives you the general idea.

Tested here : https://qmlonline.kde.org/

import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.12

Rectangle
{
    width: 80
    height: 80
    
    property bool isSelected : false
    
    color: mouseArea.containsMouse && !isSelected ? "#CDCDCD" : isSelected ?  "#F6F6F6" : "#E4E4E4"

    Rectangle
    {
        id: left_Border
        visible: isSelected 
        width: 3
        height: 80
        color: "#5D5F61"
        
    }
     MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: isSelected = !isSelected
    }
}