Sidebar UI Element

[KristofPusztai]

Any plans to add a sidebar UI element? Something similar to the sidebar that's already present on the examples found in the public marimo examples!

[mscolnick]

@KristofPusztai , you might be able try the Grid Layout and create it yourself: https://docs.marimo.io/guides/apps.html#layout

If we did have a sidebar, how would you like to configure it in code?

[KristofPusztai]

How would I go about doing this in Grid Mode? I was thinking something similar to the way streamlits sidebars work, getting something like this in grid mode using the style method to change the element background and position to be fixed, etc… But I havent tried this yet.

Getting such an element to have more dynamic functionality such as collapsing etc, would be similar to the already existing accordion component, just horizontal expansion instead of vertical!

[mscolnick]

With grid mode, it might be harder to have all the features like collapse while making it feel natural.

We will likely add some APIs around layout + multi-page + routing. I am curious if you have thoughts on how you'd like to interact with this.

E.g.

mo.page({
 sidebar=mo.vstack([
    mo.navitem(route="/dashboard", label="Dashboard"),
    mo.navitem(route="/settings", label="Settings"),
 ]),
 body=mo.route({
    "/dashboard": ...,
    "/settings": ...,
 }),
})

[KristofPusztai]

Yea something like that could be interesting as well for multi-page navigation, I hadn't quite thought about the sidebar as a routing tool though although that would probably be a main benefit. I was thinking of it more for displaying controls in a fixed way, that way as you scroll down the page, the sidebar remains on the side with various controls.

I think your example makes sense although I'm not sure I understand how the sidebar and body args for this mo.page function would work together. Keeping in line with the current marimo ui api, for controls I was thinking of maybe something like:

# Defining controls/any other individual elements
control1 = mo.ui.number(...)
control2 = mo.ui.dropdown(...)

# Defining sidebar
mo.ui.sidebar(
    title='Sidebar Title',
    body=mo.md(f"Control 1: {control1}  Control 2: {control2}")
    collapsible=True
)

This way the body can be formatted flexibly and it's up to the user on how to format the body of the sidebar element.

Example in mind: