Q: How to make a resizeable sidebar with panel Page component?

[bakkiaraj]

Hi,

I would like to give control to user of my app to resize the width of sidebar.

import panel_material_ui as pmui
...
 app_laypout_templ = pmui.Page(
            title=f"Metadata DB Visualizer",
            busy_indicator="circular",
            main=[main_contents],
            sidebar_width=500,
            sidebar=[
                sidebar_section,
            ],
            sidebar_variant="persistent",
            sidebar_open=self.param.sidebar_open_param, # Use the param to make it reactive
            theme_toggle=False,
        )

How shall I make the sidebar width resizable with default width is 500?

[Coderambling]

Hi @bakkiaraj . For a start, have you tried controlling the width of the sidebar by making the sidebar_width= into a variable, and then connecting the variable to, for example, a slider in the main section?

So something like:

sidebar_width=the_width_variable

Just to see if the sidebar width can be controlled in that way.

If yes, then it becomes a question of finding / re-shaping the slider, or another component, so it looks like a vertical drag bar.

Then it could possibly become an internal part of the component, if it makes sense to implement it that way.

If not, the component would need to be updated to enable this feature.

In either case, I am not sure what that would entail / how complex it would be to do that.

Can you test and give feedback on whether connecting a slider works, as outlined above?

For reference: https://panel-material-ui.holoviz.org/reference/page/Page.html

[bakkiaraj]

Hi @Coderambling ,

I added param variable to sidebar width and when the param variable changes , sidebar width is updated. What I am looking for is to allow users to dynamically drag and make sidebar as small or large width.

The following works,

..
sidebar_width_param = param.Integer(default=300, doc="Sidebar Width", per_instance=True, instantiate=True)
..
self.sidebar_width_param = self.sidebar_width_param + 100 
print (f"**********Sidebar width: {self.sidebar_width_param}")

...
app_laypout_templ = pmui.Page(
            title=f"Metadata DB Visualizer",
            busy_indicator="circular",
            main=[main_contents],
            sidebar_width=self.param.sidebar_width_param,
            sidebar=[
                sidebar_section,
            ],
            sidebar_variant="persistent",
            sidebar_open=self.param.sidebar_open_param, # Use the param to make it reactive
            theme_toggle=False,
        )

[Coderambling]

Ok so you are essentially looking for the right widget? So a vertical drag bar as it were?

So a UI element like used in the link below, that can be dragged?

https://panel.holoviz.org/reference/layouts/Swipe.html

I will ask around as well.

[bakkiaraj]

Yes , Like swipe but when user drag the vertical bar , the content of the sidebar (or the layout) to fit in the new width.

My use case is that , I have a ChatInterface in the sidebar , Some times LLM returns long tables which is best viewable with larger width. But I can not fix larger width for default as it will reduce real estate for rest of other component outside of sidebar.

[Coderambling]

Still looking into this. In pmui, instead of templates, the Page component that is used, which is implemented entirely in Javascript. https://panel-material-ui.holoviz.org/reference/page/Page.html

So it looks like it would involve extending thot pmui component in js. Looking ot the MUI library https://mui.com/ , I could not locate any standard MUI component that does this.

Just to make sure by the way, you are aware of all the pmui chat components, correct?

https://panel-material-ui.holoviz.org/reference/chat/index.html

[ahuang11]

Seems like Copilot was able to do it!
#476

[bakkiaraj]

#476 is exactly I am looking for !. Github copilot integration in this project is at next level !!

[Coderambling]

Amazing @ahuang11 !

Related Discord thread on this subject here:

https://discord.com/channels/1075331058024861767/1420723022804947035

Tpu are welcome to join the Discord server @bakkiaraj if you want to stay up to date on all things Holoviz and Panel!