marimo icon indicating copy to clipboard operation
marimo copied to clipboard

Sidebar does not close after menu item is selected in narrow mobile view

Open bulletmark opened this issue 8 months ago • 0 comments

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()

bulletmark avatar Apr 04 '25 05:04 bulletmark