React Js：如何在多个屏幕上实现左垂直菜单

Question

我对React JS，CSS和HTML非常陌生。为了我的学习目的，我正在构建一个垂直菜单，在该菜单上可以选择将新组件路由到身体的项目。原始UX如下：

-------------------------------------------|

Header
-------------------------------------------
left menu        |Body
1. Form          | Input field
2. Read content  |
                 |
--------------------------------------------

我的Main.js如下：

class Main extends Component {
  constructor() {
   super();
  }
  render() {
   return ( <Route
      path="/tests"
      render={({ history }) => (
        <div>
          <Header {...this.props} onHistory={history} />
          <Sidebar {...this.props} />
        </div>
      )}
    />
     <div id="mainPanel">
      <Route
        exact
        path="/tests"
        render={() => <TestComponent {...this.props} />}
      />
      <Route
        exact
        path="/tests/content"
        render={({ history }) => (
          <div>
            <Content {...this.props} onHistory={history} />
          </div>
        )}
      />
    </div>
   )
 }

我正在通过CSS来管理标题，侧边栏和主面板组件，以百分比的形式提到宽度和高度。菜单正在运行，但是我不确定这是最好的方法。

我正在寻求帮助，以了解处理UX设计的最佳工业实践。