Solara•3mo ago

Sidebar not hiding

My sidebar is not collapsing I am assuming it is an environment issue. I have tried with Solara==1.39.0 and Solara==1.34.1 I am also running: python 3.12 ipyvuetify==3.0.0.a2

3 Replies

iisakkirotko•3mo ago

Hi @EdgeofChaos! Seems like this is an issue with using Solara together with ipyvuetify 3. Since we are using the ipyvuetify NavigationDrawer component for the sidebar, and assuming that it comes from vuetify 2, we don't add the temporary prop that is needed for the intended behaviour in vuetify 3. If you want to use the vuetify 3 one, you should create your Layout manually. Something like

import solara


@solara.component
def Page():
    solara.Markdown('''
                    # Main content
                    ''')

@solara.component
def Layout(children=[]):
    show_sidebar = solara.use_reactive(False)
    with solara.v.Layout():
        with solara.v.NavigationDrawer(temporary=True, v_model=show_sidebar.value, on_v_model=show_sidebar.set):
            solara.Markdown('''
                            # Sidebar
                            ''')
        with solara.v.AppBar(prominent=True):
            solara.Button('Toggle sidebar', on_click=lambda: show_sidebar.set(not show_sidebar.value))
        solara.v.Main(children=children)

import solara


@solara.component
def Page():
    solara.Markdown('''
                    # Main content
                    ''')

@solara.component
def Layout(children=[]):
    show_sidebar = solara.use_reactive(False)
    with solara.v.Layout():
        with solara.v.NavigationDrawer(temporary=True, v_model=show_sidebar.value, on_v_model=show_sidebar.set):
            solara.Markdown('''
                            # Sidebar
                            ''')
        with solara.v.AppBar(prominent=True):
            solara.Button('Toggle sidebar', on_click=lambda: show_sidebar.set(not show_sidebar.value))
        solara.v.Main(children=children)

Note: solara.v is a shortcut to reacton.ipyvuetify, where all ipyvuetify widgets have been converted to elements automatically. If you want to use ipyvuetify directly, you should do something like ipyvuetify.NavigationDrawer.element(...).

EdgeofChaosOP•3mo ago

Thanks @Iisakki Rotko I will give it a try!

MaartenBreddels•3mo ago

i'm happy to accept a PR to make this compatible with vuetify 2 and 3!

Gaming

Programming

Sidebar not hiding