Request: header with categories BY DEFAULT EXPANDED

Feature Requests
1

Dear Softr,

I have a pretty information-dense website, so for improved navigation I want to have the ‘Header with categories’ presented as a column. This is currently possible with Softr (and this block already gives great flexbility in colors/fonts/icons), but by default these categories are collapsed (and I see no option to have them expanded/opened by default → can you please add this (minor) option to this header?

Best regards,
Thijs

softr header option request
softr header option request1304×1076 201 KB

1 Like
2

Dear Softr Team,

I echo this request :pray:

I use the same menu in the desktop version, and it works perfectly with the headings, icons, etc. Please create a solution or a special menu specifically designed for the desktop version. This would be highly valuable to almost everyone here.

Please also add the function to change the background of the active link or the font (hover).

The absolute highlight would be if there’s an option at the bottom of this menu to display the active user’s information (for the upgrade plan, etc.).

In essence, we are requesting a dashboard menu with the mentioned features, similar to what you use in Softr or what is commonly seen in the SaaS industry.

Thank you! :pray:

3

I needed this too for my app, I ended up adding a snippet of custom code to the app level custom code header. You’ll need to change ‘home-header’ to the block name of your vertical header.

This should give you the behavior of all header categories being expanded by default.

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

Thank you, we’re almost there! This code makes the first category collapse indeed (thanks!), but the second and third won’t collapse just yet… any suggestions on how to make the final tweak to this code? (I tried some things, but I can’t get it to work myself)

image

5

Hmm, that should expand all.

@artur, any suggestions?

6

Here would be the solution, without using Jquery

<script>
window.addEventListener('block-loaded-header1', () => {
  const accordionElements = document.querySelectorAll(".MuiAccordion-root");
  accordionElements.forEach((element) => {
    const button = element.querySelector('div[role=button]');
    if (button) {
      button.click();
    }
  });
});
</script>

Same as before => App or page level => custom code => Header or footer should work. Just change “header1” by your header ID/Name

7

Works like a charm! Thank you for your quick response Matthieu!

8

I needed a similar feature for my app, and I’d like to share my solution in case anyone finds it useful. The goal was to keep the menus that were previously opened open after a click. Here’s my solution:

<script>
window.addEventListener('block-loaded-header1', () => {
  const accordionElements = document.querySelectorAll(".MuiAccordion-root");
  const clickedAccordions = JSON.parse(localStorage.getItem('clickedAccordions') || '[]');
  accordionElements.forEach((element, index) => {
    const button = element.querySelector('div[role=button]');
    if (clickedAccordions.includes(index) && button) button.click();
    button.addEventListener('click', () => {
      let currentState = JSON.parse(localStorage.getItem('clickedAccordions') || '[]');
      currentState = currentState.includes(index) ? currentState.filter(i => i !== index) : [...currentState, index];
      localStorage.setItem('clickedAccordions', JSON.stringify(currentState));
    });
  });
});
</script>

Thank you for the tips, they helped me a lot!