Embedded sidebar

[edan-bainglass]

My app has several pages. I manage my own app bar navigation component. One of my pages could use a sidebar. But it appears that the sidebar cannot be embedded. If I am mistaken, please let me know how I can do this.

[edan-bainglass]

@solara.component
def Sidebar(children=[]):
    """Puts its children in the sidebar of the AppLayout (or any layout that supports it).
    This component does not need to be a direct child of the AppLayout, it can be at any level in your component tree."""
    ...

1. What does "any layout that supports it" mean?
2. The second sentence suggests that one could embed the sidebar, but it doesn't seem to be the case.

[edan-bainglass]

Further reading into the docs:

---

Nested Layouts

Each subdirectory (or subpackage) can define a Layout component in its own __init__.py, which then is embedded into the parent Layout to provide a hierarchical nested layout tree.

This is useful for larger apps where each subdirectory may add a bit of layout/chrome around your page.

---

This sounds like what I'm looking for, but it doesn't work as expected.

main.py (the entry point of my app)

routes = [
    solara.Route(
        path="root",
        children=[
            solara.Route(path="workbench", component=Workbench),
        ],
        layout=Layout,
    ),
]

Then my workbench component

components/
  __init__.py
  workbench/
      __init__.py
      workbench.py 

workbench/__init__.py - testing...

@solara.component
def Layout(children=[]):
    with solara.Sidebar():
        with rv.ListGroup():
            with rv.ListItem():
                solara.Text("1")
            with rv.ListItem():
                solara.Text("2")
            with rv.ListItem():
                solara.Text("3")
            with rv.ListItem():
                solara.Text("4")
    solara.Div(children=children)

and workbench/workbench.py

@solara.component
def Workbench():
    with rv.Container(class_="mt-5"):
        Wizard()

---

My end goal is that the workbench route comes with a sidebar that acts as a set of vertical tabs. A click on a tab will render the body of the Workbench (right of the sidebar) with the corresponding wizard component.

[iisakkirotko]

I think it should be okay for the Layout component to be defined in the same file as Workbench.

If that doesn't work, how about importing workbench/__init__.py's Layout component in your top-level __init__.py and adding it explicitly like

from .workbench import Layout as WorkbenchLayout

routes = [
    solara.Route(
        path="root",
        children=[
            solara.Route(
                path="workbench",
                component=Workbench),
                layout=WorkbenchLayout,
        ],
        layout=Layout,
    ),
]

[edan-bainglass]

Defining a Layout component in workbench.py doesn't seem to work. Of course, leaving it in the module's init file, renaming it, and importing it, does indeed work. But the intended behavior of a sidebar nested under my perma-appbar is not achieved. I suspect the sidebar mechanism is too rigid, expecting to take over an entire page. I need to dig into the code, maybe into how AppLayout is implemented, which is the only Layout class I could get the sidebar to work in.

[edan-bainglass]

I'm trying to slowly build a nested layout (great if you could provide an example 🙏).

Considering that by itself, AppLayout works and renders a sidebar if one is provided in the actual component. So, for example, if the following is assigned an app layout (or I guess it is by default), the following definition should render a sidebar:

def Tester():
    with solara.Sidebar():
        solara.Text("I'm in the sidebar")
    solara.Text("I'm in the body")

Looking into the code of the AppLayout component

...
    children_without_portal_sources = [c for c in children if c.component != AppBar]
    use_drawer = len(children_without_portal_sources) > 1
    children_content = children
    children_sidebar = []
    if use_drawer:
        child_sidebar = children_without_portal_sources.pop(0)
        children_sidebar = [child_sidebar]
        children_content = [c for c in children if c is not child_sidebar]
    children_sidebar = children_sidebar + sidebar_portal.use_portal()
    children_appbar = appbar_portal.use_portal()
    if children_sidebar:
        use_drawer = True
...

I assume that children_sidebar should be the solara text component ("I'm in the sidebar"). I tested this by constructing a minimal replication:

@solara.component
def TesterLayout(children=[]):
    print(children)
    sidebar_open, set_sidebar_open = solara.use_state_or_update(False)

    children_without_portal_sources = [
        c for c in children if c.component != solara.applayout.AppBar
    ]
    use_drawer = len(children_without_portal_sources) > 1

    children_content = children
    children_sidebar = []

    if use_drawer:
        child_sidebar = children_without_portal_sources.pop(0)
        children_sidebar = [child_sidebar]
        children_content = [c for c in children if c is not child_sidebar]

    print(children_sidebar)
    solara.Div(children=children)

children_sidebar comes out empty. The incoming children of TesterLayout are

[Div(classes = ['solara-autorouter-content'], children = ...)]

On inspection of the DOM, it seems the sidebar children (as well as the content children) are somewhere in the children of this Div child. My confusion is two fold:

1. How can I reach the children?
2. What am I missing in my replication of AppLayout?

---

Note that replacing the code of TesterLayout with the exact code of AppLayout leads to the same result as above. It then appears to not be an issue of incorrect replication, but rather that perhaps the way AppLayout is designed is not intended to be nested under another layout? However, testing this by removing the wrapping layout does not alleviate matters. I still get the "wrong" children.

@iisakkirotko any advice here would be greatly appreciated. I am trying to understand the intended usage of Sidebar, and to understand how much work is necessary, if possible, to include a sidebar in a component nested under a parent layout.

[iisakkirotko]

1. What does "any layout that supports it" mean?

That the contents of the sidebar should be used in the layout in question. For AppLayout take a look at lines 254 and 331-345 in it's definition:

    children_sidebar = children_sidebar + sidebar_portal.use_portal()
    ...
    if embedded_mode and not fullscreen:
        ...
    else:
        with v.Html(tag="div", style_="height: 100vh") as main:
            with solara.HBox():
                if use_drawer:
                    with v.NavigationDrawer(
                        ...
                    ):
                        if not show_app_bar:
                            AppIcon(sidebar_open, on_click=lambda: set_sidebar_open(not sidebar_open))
                        v.Html(tag="div", children=children_sidebar, style_="...").meta(ref="sidebar-content")

Where we first get the children that have been injected into the portal, and then render them.

2. The second sentence suggests that one could embed the sidebar, but it doesn't seem to be the case.

That being said, I don't think I follow what you mean with embed in this context?

(in a different post) 2. What am I missing in my replication of AppLayout?

I think your minimal layout

@solara.component
def TesterLayout(children=[]):
    print(children)
    sidebar_open, set_sidebar_open = solara.use_state_or_update(False)

    children_without_portal_sources = [
        c for c in children if c.component != solara.applayout.AppBar
    ]
    use_drawer = len(children_without_portal_sources) > 1

    children_content = children
    children_sidebar = []

    if use_drawer:
        child_sidebar = children_without_portal_sources.pop(0)
        children_sidebar = [child_sidebar]
        children_content = [c for c in children if c is not child_sidebar]

    print(children_sidebar)
    solara.Div(children=children)

Is missing the line

    children_sidebar += sidebar_portal.use_portal()

which actually fetches all the children that should be injected into the global Sidebar element. This is needed because instead of being a conventional component, Sidebar is a portal - that is, any children given to it are prevented from being rendered, and instead stored in it's portal, where we can then fetch those children via .use_portal() and inject them into the actual component tree elsewhere.

[edan-bainglass]

I need to read more on portals 😅 Regarding "embed"-ing of a sidebar, I mean having a sidebar in a child route. All my routes are wrapped in a layout that provides a custom fixed navbar. When I go to a page that needs a sidebar, I want to see the fixed navbar, then below it, the page with the sidebar. The sidebar control in this case would be at the top left of the page, but still below the fixed navbar. So the sidebar concept of solara is here "embedded" within my fixed-navbar layout.

[iisakkirotko]

Alright! I think either using the portal, or wrapping layouts would work for that. You can also make use of something like declaring a Sidebar component in each module that needs it, and then in one of your Layouts you could check

if hasattr(route.module, "Sidebar"):
    route_current.module.Sidebar()

Like we do in the layout of our website.