Collapsable menu bar moves label.

Radio1985

Hi All,
I have a simple desktop widget application creating using QT Creator.
It has a left menu bar with with some buttons and labels. The menu button has an icon as shown below.

I want to collapse the left menu bar (i.e blue color frame) to the left when I press the menu button. The way I have implemented, I see that "Menu" label moves to the left and goes on top of the icon as shown below.

As shown above the "Menu" label goes on top of the button icon after collapse.
Any idea how I can fix this?

I am using the following code.
In mainwindow.cpp: when the menu button clicked:

void MainWindow::on_menuIcon_clicked()
{
    // Calculate the target width for the sidebar
    int targetWidth = isSidebarCollapsed ? sidebarExpandedWidth : sidebarCollapsedWidth;

    // Create an animation to change the width
    QPropertyAnimation *animation = new QPropertyAnimation(ui->leftMenu, "maximumWidth", this);
    animation->setDuration(animationDuration);
    animation->setStartValue(ui->leftMenu->maximumWidth());
    animation->setEndValue(targetWidth);
    animation->start();

    // Update the collapsed state
    isSidebarCollapsed = !isSidebarCollapsed;
}

In MainWindow.h:

bool isSidebarCollapsed; // Define the variable here

// Constants for sidebar width and animation duration
const int sidebarExpandedWidth = 198;  // Adjust this to your needs
const int sidebarCollapsedWidth = 60;  // Adjust this to your needs
const int animationDuration = 500;      // Adjust this to your needs

Axel Spoerl

@Radio1985
Hi,

The short answer is probably:
pushButton->setStyleSheet("text-align:left;");

But I am not so sure if I understand the use case correctly. There is a menu, created manually with buttons. On top of that, there is a button, called menuIcon(confuses me: why not menuButton?), associated with the text "Menu". So what is it supposed to do, when the menu is already there anyway? I would expect the button to expand the menu.
For this purpose, I'd rather use a QMenu, like shown in this example.
Or a tool button. Or assign a menu to a push button.

JonB

@Radio1985
I may be wrong(!), but I think buttons shrink to the width of their container. You may have to put a minimum or fixed width on the buttons to prevent this when the menu is narrow?

EDIT
OIC, you are not complaining about the narrow buttons, only about where the Menu label is positioned? Sorry, don't know about that.

Radio1985

This post is deleted!

jsulm

@Radio1985 said in Collapsable menu bar moves label.:

The way I have implemented

How did you implement this menu bar? Is it your own implementation? Are these button and "Menu" label in a layout?

Radio1985

@jsulm
This is my design and I used QT Creator to draw the UI widgets. Please see a screenshot if this below.

Thanks!

Axel Spoerl

@Radio1985
I might be wrong, but I don’t see any menu bar here.
What I see is a frame containing a push button and a label.
When the main window shrinks, the are getting squeezed together. That’s expected behavior.
To achieve the desired behavior, set an icon and a text on the push button and drop the label.

Radio1985

@Axel-Spoerl
I removed the label and added a text on the push button as shown below.

But when my frame shrinks, the button shrinks and the icon also moves to the left.

The behavior I want is the button shrinks until I see only the button icon and I don't see any text labels, something like below.

Any ideas? If you think that this behavior can be achieved in a different way please recommend it or share any resources.

Thanks!

Axel Spoerl

@Radio1985
Hi,

The short answer is probably:
pushButton->setStyleSheet("text-align:left;");

But I am not so sure if I understand the use case correctly. There is a menu, created manually with buttons. On top of that, there is a button, called menuIcon(confuses me: why not menuButton?), associated with the text "Menu". So what is it supposed to do, when the menu is already there anyway? I would expect the button to expand the menu.
For this purpose, I'd rather use a QMenu, like shown in this example.
Or a tool button. Or assign a menu to a push button.

Radio1985

@Axel-Spoerl

Thanks for the suggestion.

pushButton->setStyleSheet("text-align:left;");

does fix the issue.
Yes it does make sense to name it as menuButton. Initially I had a button for the menu icon and then a label separately. So I was using menuIcon for the button name which I should have changed in the new design.
I thought of having application related button options on the GUI main window it self rather than on the menu bar.
By collapsing the menu bar to the left, I wanted to get more space from the main dash board side. Hope this makes sense.
May be I should remove the wording "Menu" to avoid confusion.