[DashboardLayout] Improve header title customizability

[apedroferreira]

Summary

Right now, customization options for the title that shows in the layout header are quite limited.
Even though it might be possible to do it by using the sx prop in DashboardLayout and targeting the correct element, we could find ways to make that title more straightforward to customize, as it might be something many users want more control over.

A simple, flexible solution might just be adding a new slot for that title.

Examples

No response

Motivation

User feedback on docs: "How to style the branding title? Can I change it to a component instead of a text?"

Search keywords: dashboard layout header branding title appbar style

[prakhargupta1]

Relates to: #4450

[mkarajohn]

+1 for this.

title as string is rather limiting, it should be able to accept full ReactNodes or make it work like a slot, ala toolbar.

For the record, passing a ReactNode to title right now works, with only TS throwing a type error

[Janpot]

For the record, passing a ReactNode to title right now works, with only TS throwing a type error

This would be my least favourite solution as I could imagine we'd want future use cases where no React host is available. But I could see a slot or a render prop work well.

[mkarajohn]

Oops, @Janpot I want to issue a correction: I thought this was about the title in the PageContainer, and that's where my comment was applying to!

I'll see if there's a request-issue for PageContainer's title