'Sidebar and routing' example does not work

Describe the bug

Dear developers and community, fantastic work!

The routing in the full example with a sidebar is not working (https://docs.marimo.io/api/layouts/routes.html). The sidebar is displayed correctly and the links are working just fine.

Am I missing something?

Environment

{ "marimo": "0.9.20", "OS": "Linux", "OS Version": "6.5.0-44-generic", "Processor": "x86_64", "Python Version": "3.11.6", "Binaries": { "Browser": "--", "Node": "--" }, "Dependencies": { "click": "8.1.7", "docutils": "0.20.1", "itsdangerous": "2.2.0", "jedi": "0.19.1", "markdown": "3.5.1", "narwhals": "1.13.2", "packaging": "23.2", "psutil": "5.9.7", "pygments": "2.17.2", "pymdown-extensions": "10.5", "pyyaml": "6.0.1", "ruff": "0.5.1", "starlette": "0.34.0", "tomlkit": "0.12.3", "typing-extensions": "4.12.2", "uvicorn": "0.25.0", "websockets": "12.0" }, "Optional Dependencies": { "altair": "5.4.0", "pandas": "2.1.3" } }

Code to reproduce

import marimo

__generated_with = "0.9.20"
app = marimo.App()

@app.cell
def __():
    import marimo as mo
    return (mo,)

@app.cell
def __(mo):
    mo.sidebar(
        [
            mo.md("# marimo"),
            mo.nav_menu(
                {
                    "#/": f"{mo.icon('lucide:home')} Home",
                    "#/about": f"{mo.icon('lucide:user')} About",
                    "#/contact": f"{mo.icon('lucide:phone')} Contact",
                    "Links": {
                        "https://twitter.com/marimo_io": "Twitter",
                    "https://github.com/marimo-team/marimo": "GitHub",
                    },
                },
                orientation="vertical",
            ),
        ]
    )
    return

@app.cell
def __(mo):
    mo.routes({
        "#/": mo.md("# Home"),
        "#/about": mo.md("# About"),
        "#/contact": mo.md("# Contact"),
        mo.routes.CATCH_ALL: mo.md("# Home"),
    })
    return

if __name__ == "__main__":
    app.run()

marimo-team / marimo