Leave header with sublinks and icons displayed by default

Hello everybody!

I am working on a new internal tool, have the header orientation in vertical for logged in users.

In order to use icons in the menu links I had to use the module:
“Header with sublinks, icons and description”.

The problem, is that the user has to click to display the menu and that it is visual.

Is there any script or way to leave it displayed by default?

Thanks!

1 Like

@RafaPG can you pls share screenshots or video recording about the above issue ? then it will be easy for me to help.

Good morning @artur !

Thank you for your reply.

I attach an image, which will be better understood than my English translator.

The submenu with icons by default is not displayed.

I need to set it as displayed by default.

Thanks for your help!

DM-ing you so we can troubleshoot in your app

Hello @artur ,

You have a DM.

No one else has come across this use case?

Using a vertical menu with icons to give the interface a more user friendly visual appearance.

Thanks!

Hi @RafaPG ,

I use the following to open the top-level link after page load.

$(".MuiAccordion-root:first-child div[role=button]")[0].click();

You may have to adjust the selector.

1 Like

Thank you @rhinonix rhinonix!

I will try to see if I can adapt it

Hello @RafaPG ,

I have the exact same use case and I’m struggling to resolve it.
Did you manage to make it work?

Thanks!

Hey folks we chatted also via DM

May I know why instead of links you use sub-links and then need to click to open ?

1 Like

The main reason for using sub-link is that they allow customization of the icons. Giving a more corporate look and feel.

It would be good to consider the option of allowing a header with links and icons. With this it would not be necessary to use extra code.

Attached sample image

@bencoh26 @rhinonix
I have not been able to get the code snippet to work.

Can you help us by sharing how to locate the module to execute the action?

Thanks!

1 Like

@RafaPG try this

<script>
window.addEventListener('block-loaded-home-colaborador-con-iconos', () => {
	$(".MuiAccordion-root:first-child div[role=button]")[0].click();
});
</script>

Thank you very much Artur!
It’s working!!! :smiley:

The application is looking great :smiley:

:heart_eyes:

1 Like

Hi @RafaPG ,

Glad you were able to get it working! Thanks @artur!