[material-ui][docs] Refine templates theme selector

[zanivan]

• I have followed (at least) the PR section of the contributing guide.

Description

Fixes item 10 from #41469
Fixes item 1 from #42609

Refined the theme and mode selector by moving them from within the template to a top bar that also includes a back button. This change cleans up the template layout and enhances the visibility of the theme selector and mode toggler.

Preview

All templates from https://deploy-preview-43396--material-ui.netlify.app/material-ui/getting-started/templates/

Current	New

[aarongarciah]

✨

[zanivan]

Hey @aarongarciah, could you give me a hand with the double scrollbar in the templates? After adding the navbar, some templates ended up with a double scrollbar, and I haven’t been able to figure out how to remove it 😬

[aarongarciah]

@zanivan sure, let me take a look

[aarongarciah]

@zanivan this scrollable container highlighted in the screenshot is the responsible:

It should use height: calc(100vh - 60px) instead of height: 100vh.

I think we could make it work without calculations, too. Let me take a deeper look. But for now, that should fix it.

[aarongarciah]

@zanivan here's an example approach of how we could treat the navbar as a "frame" so we don't need to make calculations for scrollable containers:

aarongarciah@905d8b7

Not to be applied in this PR (unless you want to), just wanted to let you know another approach.

---

There's a small issue on small viewports where the scroll bar is partially hidden behind the header. We can fix it in another PR.

[zanivan]

@aarongarciah Thanks so much! Will merge this one and open a new just to fix the frames 👍