I've implemented a custom sidebar within a multipage app. I did not use the popup suggestion to convert the sidebar for mobile because I have a shared header across multiple pages. Instead, I added a custom hamburger button to the header that is only visible on mobile devices.
To display the sidebar:
- I toggled the "Show on Mobile" option for the sidebar.
- I updated a variable's state when the hamburger button was clicked to control the sidebar visibility.
Initially, everything worked as expected, but the sidebar suddenly stopped functioning. Now, even though the component still appears as "visible" in the left-hand components menu, it does not open when triggered.
Steps to Reproduce:
- Create a custom sidebar on a multipage app.
- Add a custom hamburger button in a shared header.
- Toggle the "Show on Mobile" option for the sidebar.
- Use a variable to control the sidebar's visibility when clicking the hamburger button.
- Observe that the sidebar no longer opens, despite being marked as visible.
Expected Behavior: The sidebar should open when the hamburger button is clicked.
Actual Behavior: The sidebar does not open, even though it is marked as "visible" in the components menu.
Additional Notes:
- The issue occurred suddenly after the sidebar initially worked.
another strange behaviour, if you click the preview app button, the sidebar opens on mobile regardless the variable status. Even if there is the "hidden" icon indicator, it's impossible to close it and remains always visible
Hi Pennatool!
Would you mind sending me your app JSON at ibork@retool.com so I can look into this? Thanks!
Ok--I understand what's happening. We have a bug that occurs if the user explicitly sets the hidden property in the sidebar—in your case, that's {{ var_showSidebar.value == false }}. While we come up with a fix for this, if you instead create an onClick handler that runs sidebarFrame1.setHidden(false) and remove the 'hidden' property from the sidebar, that should hopefully work!
Hello Isabella, thanks for your reply.
This might work (didn’t test it yet) but since I have multiple pages and every page has its own sidebar, how do I know which one to toggle based on the opened page in that moment?
Just tried by adding a different toggle button in every page, however it’s not stable, it was working initially but now can’t manage to get it working on every page.
Hmm yeah the workaround is a bit tricky especially because the global toggle can't access page-scoped sidebars. Does adding a control component action handler work more consistently?
I managed to make it working, waiting for the final fix to be able to add other conditions to the hidden field! Thanks
2 Likes
