add click handler and basic style to menu on Game
This commit is contained in:
parent
3955f940e2
commit
62fe6dfcb4
2 changed files with 33 additions and 2 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue