marimo
marimo copied to clipboard
Sidebar does not close after menu item is selected in narrow mobile view
Describe the bug
I implemented the same SPA app in Streamlit and Marimo using multiple page views selected from a sidebar. A trivial marimo notebook is included below. In both, when you open the app in a mobile (narrow) view, the sidebar is collapsed. Then you click to open the sidebar and click on a a page link. In Streamlit the sidebar collapses again and you see the new page. In Marimo, the sidebar remains and obscures the new page. You have to explicitly close the sidebar. I believe that Marimo should close the sidebar when a new main page is displayed, as Streamlit does for this narrow view.
Environment
{
"marimo": "0.12.4",
"OS": "Linux",
"OS Version": "6.13.8-arch1-1",
"Processor": "",
"Python Version": "3.13.2",
"Binaries": {
"Browser": "--",
"Node": "v23.9.0"
},
"Dependencies": {
"click": "8.1.8",
"docutils": "0.21.2",
"itsdangerous": "2.2.0",
"jedi": "0.19.2",
"markdown": "3.7",
"narwhals": "1.33.0",
"packaging": "24.2",
"psutil": "7.0.0",
"pygments": "2.19.1",
"pymdown-extensions": "10.14.3",
"pyyaml": "6.0.2",
"ruff": "0.11.3",
"starlette": "0.46.1",
"tomlkit": "0.13.2",
"typing-extensions": "4.13.1",
"uvicorn": "0.34.0",
"websockets": "15.0.1"
},
"Optional Dependencies": {
"altair": "5.5.0",
"anywidget": "0.9.18",
"duckdb": "1.2.1",
"pandas": "2.2.3",
"polars": "1.26.0",
"pyarrow": "19.0.1"
},
"Experimental Flags": {
"inline_ai_tooltip": true
}
}
Code to reproduce
# /// script
# requires-python = ">=3.13"
# dependencies = [
# "marimo",
# "moutils==0.1.1",
# ]
# ///
import marimo
__generated_with = "0.12.4"
app = marimo.App(width="medium", app_title="Sidebar Example")
@app.cell
def _():
import marimo as mo
import moutils as _moutils
path = _moutils.URLHash()
return mo, path
@app.cell
def _(mo):
mo.md('# Sidebar Example').left()
return
@app.cell
def _(mo, path):
PAGES = {
'#page1': (mo.md('## Page 1 content'), 'Page 1'),
'#page2': (mo.md('## Page 2 content'), 'Page 2'),
'#page3': (mo.md('## Page 3 content'), 'Page 3'),
}
# Output main page
_page = PAGES.get(path.hash) or PAGES[list(PAGES)[0]]
_page[0]
return (PAGES,)
@app.cell
def _(PAGES, mo):
# Output sidebar
mo.sidebar([mo.nav_menu({k: v[1] for k, v in PAGES.items()}, orientation='vertical')])
return
if __name__ == "__main__":
app.run()