[DashboardLayout] Allow custom navigation page items

[apedroferreira]

Closes #4413.
Closes #4607 both for the hidden and disabled cases.

Also helps with #4733 but additional state management would be needed from the user, so maybe there is a better solution for that in the future.

Also makes it possible to easily mark items as expanded, selected or disabled, or use external links with a custom href.

Check the new documentation here:

• https://deploy-preview-4809--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#custom-page-items
• https://deploy-preview-4809--mui-toolpad-docs.netlify.app/toolpad/core/api/dashboard-sidebar-page-item/

[mui-bot]

Netlify deploy preview

https://deploy-preview-4809--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against 38cc469

[davorian]

I'm awaiting this!!!

[Janpot]

🤔 I would have expect this to just have a item prop. Does it need all these other props? This is just to render the default item right? I'm not sure we should expose more API on it.

[apedroferreira]

If you look at the expanded demo here I was just trying to make this type of changes as easy as possible as well as reusing the existing component. Some of these are things that some users already asked to be able to override.

Would it help if these props were additional options maybe? And the first parameter was the item?

[apedroferreira]

I've changed the renderPageItem typing to renderPageItem?: (item: NavigationPageItem, params: { mini: boolean }) => React.ReactNode; and updated the docs accordingly. The mini parameter still seems useful to render things differently in the minified sidebar.

It's using context under the hood to pass default values to the page item component without exposing all that API to the users, who can only set a few simple optional props now if they wish to override certain behaviors.

Examples in https://deploy-preview-4809--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#custom-page-items

[Janpot]

👍

The mini parameter still seems useful to render things differently in the minified sidebar.

I suppose the alternative would be renderMiniPageItem?

[apedroferreira]

👍

The mini parameter still seems useful to render things differently in the minified sidebar.

I suppose the alternative would be renderMiniPageItem?

That should work too if we don't mind the extra property, I'll change it.

[Janpot]

I'll change it.

for the record, that's not the propose of my comment. I'm fine with what there is

[apedroferreira]

I'll change it.

for the record, that's not the propose of my comment. I'm fine with what there is

Ok, I didn't have a huge preference between the 2 solutions but I guess that as a user I would prefer a single function prop, not to have to use 2 separate ones. So if it's ok I guess we can go with this.

Just need an approval and I can merge!

[bharatkashyap]

Big improvement! Looks good in the demo/docs 👍🏻