[docs] Improve Core tutorial

[bharatkashyap]

• Bring the core-tutorial example in sync with the docs page
• Improve the structure of core-tutorial to make the tutorial work better, for instance: Add PageContainer to dashboard/layout instead of dashboard/page/layout
• Miscellaneous small improvements to the tutorial docs page
• Also add a NavigateButton to the example to improve interactivity on the first button in dev mode:

Before	After
before.mov	after.mov

[Janpot]

Improve the structure of core-tutorial to make the tutorial work better, for instance: Add PageContainer to dashboard/layout instead of dashboard/page/layout

I did this intentionally, to show how the composability works together with app router layouts

[apedroferreira]

I think it doesn't make sense to make this a separate file/component? Seems too specific, better for it to be in the intro page(s) directly?

[bharatkashyap]

This is a client component, so – I could be wrong – it must be in its own file with "use client" at the top

[apedroferreira]

I think you can have 'use client' as the first line inside the component?

But if in terms of file structure you think this makes more sense anyway it's not a big deal!

[apedroferreira]

Matching the playground should be good here!

[bharatkashyap]

I think the playground app also contains the same attribute in the app/layout.tsx file, isn'it? That's what I can see here: https://github.com/mui/mui-toolpad/blob/master/playground/nextjs/src/app/layout.tsx#L27

[apedroferreira]

Yep that's what I meant, was just confirming that it seems good!

[bharatkashyap]

Improve the structure of core-tutorial to make the tutorial work better, for instance: Add PageContainer to dashboard/layout instead of dashboard/page/layout

I did this intentionally, to show how the composability works together with app router layouts

The issue with this was that adding a second page required adding a layout.tsx as well to the page folder; the breadcrumbs and title would not automatically appear to the newly created page. (This is what happened for me, perhaps I missed a step while following the original tutorial)

[Janpot]

The issue with this was that adding a second page required adding a layout.tsx as well to the page folder; the breadcrumbs and title would not automatically appear to the newly created page. (This is what happened for me, perhaps I missed a step while following the original tutorial)

Usually, the features of the CLI should drive the tutorial content, not the other way around. But I'm not heavily against the change, we can go with it for now.