[docs] Add example layouts

[mbrookes]

Closes #10986

[benneq]

Great work! Finally I can copy & paste nice working design examples! :)

I found one minor issue within the Dashboard example: https://material-ui.com/page-layout-examples/dashboard/

When you make your browser windows small, the Toolbar and Drawer use the dense appearance. But the padding of the Menu Button within the Toolbar won't adapt.

I'm no CSS expert, but I guess that it should become margin-left: 4px when dense layout is active.

The Toolbar's padding-right may need some adjustment, too.

---

Another nice feature request would be to exchange the Drawer variant on smaller screens. Something like:

<Hidden mdUp={true}>
    <Drawer variant="temporary">
        ...
    </Drawer>
</Hidden>
<Hidden smDown={true}>
    <Drawer variant="permanent">
        ...
    </Drawer>
</Hidden>

And then accordingly use some slightly different CSS. For example remove the padding from content (or make it much smaller).