AppBar doesnt show with just Tabs as content

[Jhsmit]

@solara.component
def Page():
    solara.Title("title")
    tab_selection = solara.use_reactive(0)

    with solara.AppBar():
        # solara.Button(icon_name="mdi-logout", icon=True)
        with solara.lab.Tabs(value=tab_selection.value, on_value=tab_selection.set, align="center"):
            solara.lab.Tab("Tab 1")
            solara.lab.Tab("Tab 2")

    solara.Card("main")
    solara.Sidebar("sidebar")

shows as:

with button uncommented:

[iisakkirotko]

Hey @Jhsmit!

This happens because the tabs are the only child to the appbar. What determines whether the appbar gets shown in the Solara code is show_app_bar, as defined here

solara/solara/components/applayout.py

Line 260 in 65a0cfc

show_app_bar = (title and (len(routes) > 1 and navigation)) or children_appbar or use_drawer or children_appbartitle

So in your case this takes the value children_appbar, which only has the tabs in it. However later on tabs get taken out of the children_appbar, since they have to be treated specially.

solara/solara/components/applayout.py

Lines 275 to 280 in 65a0cfc

	for child_appbar in children_appbar.copy():
	if child_appbar.component == solara.lab.Tabs:
	if tabs is not None:
	raise ValueError("Only one Tabs component is allowed in the AppBar")
	tabs = child_appbar
	children_appbar.remove(tabs)

This makes show_app_bar evaluate as False when we want to render it. There was another issue (#584) related to the appbar. I think this week I should take a look at the logic there to see if it can be improved a little bit.

In the meantime, if you need a workaround, defining the tabs by using routing might be a workaround.