index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useSpring } from "react-spring"
import { MenuRight } from "./Menu";
import "./styles.css";

function App() {
  const [ rightMenuVisible, setRightMenuVisible ] = useState(false);
  const rightMenuAnimation = useSpring({
    opacity: rightMenuVisible ? 1 : 0,
    transform: rightMenuVisible ? `translateX(0)` : `translateX(100%)`
  });
  
  return (
    <div className="App">
      <button
        className="menu-button"
        onClick={() => setRightMenuVisible(!rightMenuVisible)}
      >
        {rightMenuVisible ? "Close" : "Side Menu"}
      </button>
      <MenuRight style={rightMenuAnimation} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);