I have a "navigation" module inside a header that has a "hidden" attribute that I can set via the editor. However, the module object itself does not have a "setHidden" function so I cannot programmatically hide it, which seems like it might be an oversight / bug?
But actually, what would be valuable is if I can programmatically toggle headers and sidebars to be hidden or not hidden in Javascript queries.
For sidebars, it looks like you can programmatically change whether it is shown:
and we have a feature request for this setting on headers!
For the sidebar, you could use setHidden as mentioned below, or you could put something in the hidden field that can be toggled programmatically, such as temporary state (described in more detail here).
Hi @hari_whitebalance I'm sure you figure it out already but just wanted to drop my 2 cents here since I was just getting this to work.
I added a button to the main canvas next to the sidebar and added an event handler to run script with the following:
sidebarFrame1.hidden === true ? sidebarFrame1.setHidden(false) : sidebarFrame1.setHidden(true)
And this allowed me to collapse the sidebar. I also tried with a switch and it worked but I didn't like how it looked.
I also have a feature request about sidebar here.
Could add a option Mantain space when hidden as other component do?
Also programmatic set header hide possible?
Thanks @AnsonHwang, I'll request this feature!
Hi @AnsonHwang What would you want this to look like when the sidebar is hidden?
For example, would you want just the default gray background or would you want the background color of the main container to extend over the space of the sidebar? Are you mainly looking to avoid the app from shifting over to the left when the sidebar gets hidden?
I would love to programmatically change the size of the sidebar so I could remove the text on my menu bar links and only show the icons. When it expands the full text would show. Like the sidebar on Google products.
You can change the Labels to icons based on the viewport:
For changing the size, I'd recommend taking a look at the new split pane frame that launched to Cloud recently. You could pin it to the left & also use the viewport width to conditionally change the width of the split pane