Reusable navbar and sidebar elements

[aaron-schroeder]

This evolved from re-evaluating the settings page UX into a bigger scheme.

Within app.py, I build the reusable layout around the dash.page_container element that contains the necessary page elements and has routing callbacks registered.

I think I'll make parallel callbacks to control what elements appear in the navbar and sidebars, that fire when the page is re-routed or -loaded (or maybe when the dash pages content updates).

Needed:

• All pages:
  • Main navbar
  • Consolidate "Training Log", "Training Stress", and "All Activities" under a "Training" dropdown.
    • Note: On small screens, I'd like to have this dropdown auto-expand into a stacked list.
  • Now: put "analyze activity file" in the settings sidebar. Later: Conditionally add a "Tools" dropdown if logged in (?) to contain the activity analysis page.
  • Conditionally populate User dropdown based on current_user.is_authenticated
    • Not logged in: just a "log in" button
    • Logged in: A dropdown (title TBD) containing "Settings" and "Log Out" links.

• All settings pages:

  • Create sidebar from templates/admin_base.html for dash layout. Reusable component.

  • Thinking maybe just make a function plotlydash.layout.make_admin_sidebar()

  • Although I'm interested in trying to replicate dash's implementation of the pages header!

  • Maybe just have the entire dash layout as a child of some larger element? Maybe a wrapper that effectively does:

    def layout(**_):
    return AdminLayout(layout)