Sidebar open state?

[Enochsoul]

I'm having trouble with adjusting the default layout in terms of the initial sidebar state, and I'm not sure what I'm doing wrong here.

What I want is for the default sidebar state to be closed, so I would expect(perhaps incorrectly), that I could either set sidebar_open=False in a AppLayout call somewhere in the page, or create a layout function that's called with the page. I've tried all sorts of variations, but in all of them the sidebar_open=False appears to be ignored.

This is the quick and dirty test code I was using. With the sharedlayout(False) within the page, I get a sidebar as expected, but its default state is open. Changing the call to True makes no difference and removing it altogether has the expected effect of removing the sidebar and leaving just the card.

import solara


@solara.component
def sharedlayout(sidebar_state: bool):
    with solara.Sidebar():
        with solara.AppLayout(sidebar_open=sidebar_state):
            solara.Text("Sidebar Test")


@solara.component
def page():
    solara.Title("Why won't this work?")
    with solara.Column():
        solara.Card("Testing Card.")
        sharedlayout(False)

Swapping the Sidebar and Applayout contexts does collapse the sidebar, but on click of the hamburger it's a floating window and not an inline sidebar.
 
What am I doing wrong here?

[maartenbreddels]

Hi,

good question.
Similar to https://solara.dev/docs/howto/layout you can define you own layout, but now override the sidebar_open default argument:

@solara.component
def Layout(children=[]):
    print("I get called before the Page component gets rendered")
    return solara.AppLayout(children=children, sidebar_open=False)

What you do, is add an new AppLayout in an already existing applayout, which by default will use the 'embedded' mode similar to what you see on https://solara.dev/docs/howto/layout . This is because you can't really have two sidebars on one page.

Does this make sense? Did you managed to find this page in the documentation, and if so, what should we change according to you to make this more clear?

Regards,

Maarten

[Enochsoul]

Apologies for the late reply. Yes, this makes sense. I'm still getting used to the concept used here of certain function names having a purpose(eg: Page, Layout). So, what wasn't clear was that I needed the Layout function with it's return to update the default embedded AppLayout component used but all other pages.

Thanks for your help!