React Js: как реализовать левое вертикальное меню с несколькими экранами

Question

Я очень новичок в React JS, CSS и Html.В целях обучения я строю вертикальное меню, в котором выбираются элементы, из которых новый компонент направляется в тело.Raw 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-дизайна.