如何使用React Material-UI Grid实现含header、侧边栏、主区域、footer的网页顶级布局

我现有一个使用CSS Grid布局的React Web应用，布局结构如下：

................... HEADER ......................
NAV MENU |        MAIN AREA       | RIGHT SIDEBAR
..................  FOOTER ......................

该应用当前使用的CSS Grid代码如下：

body {
  display: grid;
  grid-template-areas:
    "header header header header header header header header header header "
    "menu main main main main main main main main right"
    "footer footer footer footer footer footer footer footer footer footer";
}

我希望找到实现同类布局的react/material-ui示例应用，目前查找的资源均不符合需求：

• Material-ui官方商店售卖的多款模板要么加载失败（持续显示加载动画），要么复杂度远超需求
• 第三方技术平台文章提及的相关GitHub项目无法运行，请求CDN资源返回404无内容展示，且代码未实现所需的header/导航栏/主内容区/页脚结构
• 技术问答社区有相关讨论帖具备参考价值
• 查阅material-ui Grid官方文档后，我写出了如下初步布局代码：

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Item>header</Item>
  </Grid>
  <Grid container spacing={2}>
    <Grid item xs={2}>
      <Item>nav menu</Item>
    </Grid>
    <Grid item xs={8}>
      <Item>MAIN AREA</Item>
    </Grid>
    <Grid item xs={2}>
      <Item>Right</Item>
    </Grid>
  </Grid>
  <Grid item xs={12}>
    <Item>Footer</Item>
  </Grid>
</Grid>

我将尝试运行该代码，在沙箱验证效果后会更新问题。

内容的提问来源于stack exchange，提问作者PatS