issue_comments

I'm going to go with a list of {"label": ..., "href": ...} as the first iteration of this. The logout link will not be returned as part of the plugin output. A default plugin will provide the debug tools if the user is logged in as root.

I'm torn on this one. I think I have a very slight preference for plugins returning structured objects as opposed to HTML. Less likely to regret that choice in the future?

Plugins returning HTML makes more sense for some of the other areas that plugins will be able to inject content - e.g. injecting content on the table or row page above the table.

If I'm going to have that as a pattern though it may make sense to use HTML here, since that will be consistent with other places that plugins can inject additional content.

Or... plugins could return HTML - maybe optionally using helper functions to generate common HTML such that plugins which use the helpers can have their HTML modified in the future.

Should plugins be able to add forms like the logout form here, or should they be restricted to adding navigation links?

I can't think of a reason a plugin would need to add a form. The logout form is a special case to protect against logout-csrf attacks.

So I think plugins get to return a list of dictionaries, each with a label and an href:

python return [{ "label": "Upload CSVs", "href": datasette.urls.path("/-/upload-csvs") }] But... is there an argument for returning headings, to divide up the menu?

I think so. I also like the idea that a default plugin checks for the root user and outputs links to the different debugging tools - maybe those should be wrapped in a section heading.

How should the plugin hook work?

Here's the first version of the HTML: html <div class="nav-menu-inner"> <ul> <li><a href="{{ urls.instance() }}">Home</a></li> <li><a href="{{ urls.path('/-/plugins') }}">Installed plugins</a></li> <li><a href="{{ urls.path('/-/versions') }}">Software versions</a></li> <li><a href="{{ urls.path('/-/metadata') }}">Metadata</a></li> {% if show_logout %} <form action="{{ urls.logout() }}" method="post"> <input type="hidden" name="csrftoken" value="{{ csrftoken() }}"> <button class="button-as-link">Log out</button> </form>{% endif %} </ul> </div>

So what should go in this menu?

If the user is logged in as root, I'll link to the various debug pages.

If they're not logged in at all I don't think the menu should appear.

If they are logged in as anyone, it should display to give them access to the "log out" button.

Plugins can add links to it. If those plugins add links, the menu will display.

Tips for making this accessible: https://css-tricks.com/accessible-svgs/

Here's what the prototype looks like so far:

I used a <details><summary> for this: https://github.com/simonw/datasette/blob/0d7ac764861d84be24d661cf4104ce61ea11a82a/datasette/templates/base.html#L16-L36

I added a bit of JavaScript so that clicking outside the menu would close it: https://github.com/simonw/datasette/blob/0d7ac764861d84be24d661cf4104ce61ea11a82a/datasette/templates/base.html#L59-L74