[PageContainer] Add a few extra slots or allow complete override of title

[mkarajohn]

Summary

PageContainer could use a few extra slots:

preTitle : an element that is placed immediately before the h# element that contains the title
postTitle : an element that is placed immediately after the h# element that contains the title.

preTitle, title, postTitle should wrap into new rows in smaller widths

These should be siblings to the h#, not children

An alternative approach would be to allow a ReactNode for the title prop (or turn it into a slot?), in which case it's up to the user to implement the HTML structure correctly, and the PageContainer simply renders it in place of where it's currently rendering <h#>{title}</h#>, completely replacing this with whatever the user passed as title.

If a string is passed as title then it works like it does now.

Examples

e.g.
I need to add an icon before the title and some extra information after it.

Motivation

Needing to achieve something like this:

Search keywords: PageContainer, title, customization

[apedroferreira]

I think we could add a single slot that replaces the whole title, and call it title? Feel free to open a PR!

[timurridjanovic]

Could we also allow the user to add an href or segment to link to somewhere else than just "/" ?

[bharatkashyap]

Could we also allow the user to add an href or segment to link to somewhere else than just "/" ?

This is being worked on here: #4477

[bharatkashyap]

Does the new appTitle slot (https://mui.com/toolpad/core/react-dashboard-layout/#slots) help solve your need?

[mkarajohn]

Hello, sorry for the late response but I do not have much spare time.

@bharatkashyap yes, something like this but for PageContainer not DashboardLayout