Add a universal navigation bar which can be modified by plugins

[simonw]

Needed by simonw/datasette-auth-github#5

We already have a navigation breadcrumbs header on some pages, I can extend that to be present on every page and make it easy to modify with custom templates.

[simonw]

Need to figure out a sensible mobile version of this too.

[simonw]

https://css-tricks.com/off-canvas-menu-with-css-target/ could be fun. See also https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793

[simonw]

I think I'll start with something ridiculously simple along these lines:

[simonw]

Having this be customized by a single plugin seems easy enough - define a named block region in the template, the plugin can then provide a template which extends the base template, over-rides the named block, adds some stuff, then calls super to include the default content.

But... how would this work if there are multiple plugins that want to add to the menu area?

[simonw]

For the moment I'm going to ignore the multiple plugins case. I shall revisit that at some point in the future, once I actually have multiple plugins that want to be able to customize the navigation at the same time.

[simonw]

https://latest.datasette.io/fixtures/attraction_characteristic/1 now looks like this:

[simonw]

Here's an example custom base.html template that appears to have the desired effect:

{% extends "default:base.html" %}

{% block extra_head %}
<style type="text/css">
.hd .logout {
    float: right;
    text-align: right;
    padding-left: 1em;
}
</style>
{% endblock %}

{% block nav %}
    {{ super() }}
    <p class="logout">
        <a href="/-/logout">Log out</a>
    </p>
{% endblock %}

[simonw]

This is now being used successfully by https://datasette-auth-demo.now.sh/