import { HashRouter, Switch, Route, Link } from 'react-router-dom'

function App () {

  const [isOpen, setIsOpen] = React.useState(false);

  const handleOpen = () => {

    setIsOpen(true);

  }

   const handleClose = () => {

    setIsOpen(false);

  }

  return (

   <HashRouter>

     <button onClick={handleOpen}>

      Open menu

     </button>

     <MenuItems isOpen={isOpen} onClose={handleClose} />

     <Routes />

  </HashRouter>

  )

}

​

function MenuItems ({ isOpen, onClose }) {

  const handleClick = (event) => {

    event.stopPropagation();

    onClose();

  }

  // since we're opening menu from the right side,

  // we want to push it out of the viewport to hide it

  // if we were opening it from the left side, we would use -100%

  let translate = isOpen ? '0' : '100%';

  let style = {

    transition: '0.2s',

    transform: 'translateX(' + translate + ')',