Adopt Dash pages for example apps

[mkhorton]

Creating an issue just to track. I started doing this a while back, and would be good to re-visit after #362 merged.

I'd like to re-deploy the Crystal Toolkit demo app, to achieve two goals (1) continuous deployment of the example apps to make it easier for newcomers to try them out, (2) showcase how to use Dash pages (e.g., each example app a separate page).

Changes to existing code would be minimal. It would be adding a dash.register_page() call to every example app, and creating a new main.py with navigation and a container to load the example apps, something like:

app = dash.Dash(__name__, use_pages=True, assets_folder=SETTINGS.ASSETS_PATH)

app.layout = ctl.Section(
    [
        ctl.H3("Crystal Toolkit Example Apps"),
        ctl.Columns(
            [
                ctl.Column(
                    [
                        html.Div(
                            [
                                html.Div(
                                    dcc.Link(
                                        f"{page['name']} - {page['path']}",
                                        href=page["relative_path"],
                                    )
                                )
                                for page in dash.page_registry.values()
                            ]
                        ),
                    ],
                    size=3,
                ),
                ctl.Column([dash.page_container]),
            ]
        ),
    ]
)

c.f. #265

[eshark9312]

hi, @mkhorton

I am developing multi-page dash app which also make use of dash.register_page().
And on different pages, I need to insert the crystaltoolkit components like StructureMoleculeComponent, but I don't know how to register these components to the dash app when the corresponding page is loaded.

I will appreciate any of your suggestion or experience of doing such task.