Как заставить все мое тело скользить вправо, когда я переключаю скользящую сторону

Я бы заставил свое меню скользить вправо, когда переключаю свое скользящее меню. Как это сделать? Пока я могу сделать это только с помощью position: fixed, но это вредит мне, потому что это мешает навигации - очевидно, тогда экран зафиксирован! Итак, как это сделать без исправления моего тела html.

Вот демонстрация моей ситуации: https://codesandbox.io/s/8zzr0jmm98

Вот мой фрагмент Reactjs:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = { menuDisplayed: false };
  toggleMenu = () => {
    console.info("toggleMenu reached");
    this.setState({
      menuDisplayed: !this.state.menuDisplayed
    });
    return;
  };

  render() {
    return (
      <div className = "App">
        <div
          className = {
            this.state.menuDisplayed ? "box_two_displayed" : "box_two_hidden"
          }
        >
          {" "}
          Box Two{" "}
        </div>
        <div
          className = {
            this.state.menuDisplayed ? "box_one_displayed" : "box_one_hidden"
          }
        >
          {" "}
          Box One{" "}
        </div>
        <div onClick = {this.toggleMenu} className = "toggler">
          {" "}
          ToggleMenu{" "}
        </div>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вот мой фрагмент css:

.App {
  font-family: sans-serif;
  text-align: center;
}

.box_one_displayed {
  /* position: fixed;*/
  left: 200px;
  /* height: 100vh;*/
  background-color: grey;
  transition: all 0.5s linear;
}

.box_one_hidden {
  /* position: fixed;*/
  left: 0;
  /* height: 100vh;*/
  background-color: grey;
  transition: all 0.5s linear;
}

.box_two_displayed {
  position: fixed;
  z-index: 500;
  width: 200px;
  left: 0;
  background-color: cyan;
  transition: all 0.5s linear;
}

.box_two_hidden {
  position: fixed;
  z-index: 500;
  width: 200px;
  left: -200px;
  background-color: cyan;
  transition: all 0.5s linear;
}

.toggler {
  position: fixed;
  top: 50px;
  left: 350px;
  cursor: pointer;
  background-color: pink;
}

Любой намек был бы отличным, Благодарность