当我切换滑动侧菜单时,如何使全身向右滑动

下面是我的情况演示: https://codesandbox.io/s/8zzr0jmm98

下面是我的代码片段:

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

import "./styles.css";

class App extends React.Component {
  state = { menuDisplayed: false };
  toggleMenu = () => {
    console.log("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;
}

任何暗示都很好, 谢谢