add click handler and basic style to menu on Game

This commit is contained in:
sorrelbri 2020-06-21 18:47:00 -07:00
parent 3955f940e2
commit 62fe6dfcb4
2 changed files with 33 additions and 2 deletions

View file

@ -1,7 +1,22 @@
import React from "react"; import React from "react";
import "./Menu.scss";
const Menu = ({ ...props }) => { const Menu = ({ showMenu, clickClose, ...props }) => {
return <></>; const handleBackgroundClick = (e) => {
if (e.target.className === "Game__Menu-container") clickClose();
};
if (!showMenu) return <></>;
return (
<div
className="Game__Menu-container"
onClick={(e) => handleBackgroundClick(e)}
>
<div className="Game__Menu-container__Menu">
<button onClick={clickClose}>X</button>
</div>
</div>
);
}; };
export default Menu; export default Menu;

View file

@ -0,0 +1,16 @@
div.Game__Menu-container {
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: absolute;
width: 100vw;
z-index: 2;
.Game__Menu-container__Menu {
background: #eef;
width: 80vw;
min-height: 20vh;
}
}