<!DOCTYPE html>
<html>

<head>
  <title>Wysuwane menu</title>
</head>

<body>
  <div id="container"></div>
</body>

</html>

---

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import MenuContainer from "./MenuContainer";

ReactDOM.render(
  <MenuContainer/>,
  document.querySelector("#container")
);
---

body {
  background-color: #EEE;
  font-family: sans-serif;
  font-size: 20px;
  padding: 25px;
  margin: 0;
  overflow: auto;
}

#container li {
  margin-bottom: 10px;
}
---

import React, { Component } from "react";

class MenuContainer extends Component {
  render() {
    return (
      <div>
        <div>
          <p>Który z poniższych elementów nie pasuje do pozostałych?</p>
          <ul>
            <li>Drzewo</li>
            <li>Trzcina</li>
            <li>Ryba</li>
            <li>Las</li>
            <li>Trawa</li>
            <li>Róża</li>
            <li>Pomidor</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default MenuContainer;
---

constructor(props) {
  super(props);

  this.state = {
    visible: false
  };

  this.toggleMenu = this.toggleMenu.bind(this);
}

toggleMenu() {
  this.setState({
    visible: !this.state.visible
  });
}
---

    this.handleMouseDown = this.handleMouseDown.bind(this); 
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  handleMouseDown(e) {
    this.toggleMenu();
    console.log("clicked");
    e.stopPropagation();
  }
---

import React, { Component } from "react";
import './MenuButton.css';

class MenuButton extends Component {
  render() {
    return (
      <button id="roundButton"
              onMouseDown={this.props.handleMouseDown}></button>
    );
  }
}

export default MenuButton;
---

#roundButton {
  background-color: #96D9FF;
  margin-bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 10px solid #0065A6;
  outline: none;
  transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
}

#roundButton:hover {
  background-color: #96D9FF;
  cursor: pointer;
  border-color: #003557;
  transform: scale(1.2, 1.2);
}

#roundButton:active {
  border-color: #003557;
  background-color: #FFF;
}
---

      <MenuButton handleMouseDown={this.handleMouseDown}/>
---

      <Menu handleMouseDown={this.handleMouseDown}
            menuVisibility={this.state.visible} />
---

import React, { Component } from "react";
import "./Menu.css";

class Menu extends Component {
  render() {
    var visibility = "hide";

    if (this.props.menuVisibility) {
      visibility = "show";
    }

    return (
      <div id="flyoutMenu"
           onMouseDown={this.props.handleMouseDown}
           className={visibility}>
        <h2><a href="#">Strona główna</a></h2>
        <h2><a href="#">O nas</a></h2>
        <h2><a href="#">Kontakt</a></h2>
        <h2><a href="#">Szukaj</a></h2>
      </div>
    );
  }
}

export default Menu;
---

#flyoutMenu {
  width: 100vw;
  height: 100vh;
  background-color: #FFE600;
  position: fixed;
  top: 0;
  left: 0;
  transition: transform .3s
              cubic-bezier(0, .52, 0, 1);
  overflow: scroll;
  z-index: 1000;
}

#flyoutMenu.hide {
  transform: translate3d(-100vw, 0, 0);
}

#flyoutMenu.show {
  transform: translate3d(0vw, 0, 0);
  overflow: hidden;
}

#flyoutMenu h2 a {
  color: #333;
  margin-left: 15px;
  text-decoration: none;
}

#flyoutMenu h2 a:hover {
  text-decoration: underline;
}
