Top bar UI

We need a top bar across the site for the following pages:

Dashboard

The name of the tool on the top left (name to be confirmed, for now use 'Lulu writer'), and the user avatar on the top right.

Import page

The word 'Dashboard' on the left (which goes to the dashboard), and the user avatar on the top right.

Title page

Either the words 'Import page' or 'Dashboard' depending where you came from/which flow you are in), and the user avatar on the top right.

The producer page

The word 'Dashboard' on the left (which goes to the dashboard), and the user avatar on the top right. 'Invite' and 'Preview' buttons appear to the left of the user avatar.

Note on this page the top bar collapses away when in focus mode, so that just the editing bar is left behind.

The preview page

The word 'Producer page' on the left (which goes to the producer page), and the user avatar on the top right.

User avatar

The user's avatar should be their first initial in white in a filled in grey circle.

Implementation details

See similar implementation here: https://gitlab.coko.foundation/hhmi/hhmi/-/blob/master/packages/client/app/ui/common/Header.js