Add new Teleport for app-bar-title

[joepavitt]

Description

https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

This is proving more complicated than I expected. With the existing app-bar-action teleport, it's easy as we're injecting content into somewhere where there isn't any already.

Here, we want to render the default page title, or replace it if a <teleport> has been provided. - this is generally what slots are used for, but we can't just generically access a <slot> from other areas of your application.

I've tried setting up logic that shows the default if nothing is rendered in the title otherwise, this can run on mounted, but the teleported content does render until a ui-config is received. The computed variable approach also doesn't work as vue does not watch the innerHTML of a DOM node for the reactivity required here.

[nileio]

thanks for the update @joepavitt - if this is proving a little bit complex and I see the status changed to Blocked, then hiding the entire topbar would be awesome and hopefully an easier change - I think there is a different request for that feature already still open here https://github.com/FlowFuse/node-red-dashboard/issues/645

If we can hide the topbar altogether (similar to Dashboard 1 feature), then the rest is easy because we already have the ability to create our own custom topbar.. thank you!

[joepavitt]

Just spoke with @robmarcer about a use case he has, and came to conclusion that we can add a teleport alongside the page title, and then have a separate option to hide the page title. This gives flexibility to hide the page title generally, but also would then enable a "replace" option for the page title.