[4.0] Overlay mobile navs, not clickable if a other one is open

[HRIT-Florian]

If the mobile menu is open, any other mobile menu like user is than not openable, because it overlays.

What needs to be fixed

1st click to the main mobile nav.
2nd click to any other mobile nav.

Why this should be fixed

Just fo UX ;)

How would you fix it

Maybe a dynamic zindex, set to the higher by js if a menu is already open
Or close the current menu when another one is opened

[ghost]

Issue confirmed.

[brianteeman]

It is a z-index issue. My non-skilled css says that it is resolved by removing the special z-index-mobile-menu here but maybe there are consequences I can not see and there is a better way to fix it

joomla-cms/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss

Line 277 in 98a4b2a

z-index: $zindex-mobile-menu;

@hans2103 any ideas?

[hans2103]

I can reproduce the issue

see movie

Screen.Recording.2024-08-07.at.11.10.00.mov

onwards to find a solution. :-)

I can not see and there is a better way to fix it

@brianteeman how about closing all open DropDown items when a new dropdown should open?
not a CSS fix, but a JS fix instead

[hans2103]

The button bottom right to open Main Menu is using "Bootstrap Collapse"
The two buttons bottom left to open User Menu or Joomla info are using "Bootstrap Dropdown"

Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
https://getbootstrap.com/docs/5.2/components/dropdowns/

Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
https://getbootstrap.com/docs/5.2/components/collapse/

So...
when you click the menu (bottom right) having data-bs-toggle="collapse" should close any open data-bs-toggle="dropdown".
And the other way around too... when you click the menu (bottom left) having data-bs-toggle="dropdown" should close any open data-bs-toggle="collapse".

update
Any open data-bs-toggle="dropdown" will close when you click somewhere else. So we only have to extend Atum to close any open data-bs-toggle="collapse" when you click to open a data-bs-toggle="dropdown"

[hans2103]

Created PR #43891 to solve this issue

[alikon]

please test #43891