2021-09-19 06:46:39 +02:00
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import makeStyles from "@mui/styles/makeStyles";
|
|
|
|
import Box from "@mui/material/Box";
|
|
|
|
import Collapse from "@mui/material/Collapse";
|
|
|
|
import Fab from "@mui/material/Fab";
|
|
|
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
2021-09-21 08:07:47 +02:00
|
|
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
2021-09-19 23:05:27 +02:00
|
|
|
import { use } from "../Context";
|
|
|
|
import { Page } from "../Router";
|
2021-09-19 06:46:39 +02:00
|
|
|
|
|
|
|
const useStyles = makeStyles({
|
|
|
|
nobackground: {
|
|
|
|
backgroundColor: "#0000",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
children: JSX.Element[] | JSX.Element | React.ReactElement[] | React.ReactElement;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Overview({ children }: IProps): React.ReactElement {
|
|
|
|
const [open, setOpen] = useState(true);
|
|
|
|
const classes = useStyles();
|
2021-09-19 23:05:27 +02:00
|
|
|
const router = use.Router();
|
2021-09-20 00:04:12 +02:00
|
|
|
if (router.page() === Page.BitVerse || router.page() === Page.HackingMission || router.page() === Page.Loading)
|
|
|
|
return <></>;
|
2021-09-21 08:07:47 +02:00
|
|
|
let icon;
|
2021-09-22 18:56:55 +02:00
|
|
|
if (open) {
|
2021-09-21 08:07:47 +02:00
|
|
|
icon = <VisibilityOffIcon color="primary" />;
|
|
|
|
} else {
|
|
|
|
icon = <VisibilityIcon color="primary" />;
|
|
|
|
}
|
2021-09-19 06:46:39 +02:00
|
|
|
return (
|
|
|
|
<div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
|
|
|
|
<Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
|
|
|
|
<Collapse in={open}>{children}</Collapse>
|
|
|
|
<Box display="flex" justifyContent="flex-end">
|
|
|
|
<Fab classes={{ root: classes.nobackground }} onClick={() => setOpen((old) => !old)}>
|
2021-09-21 08:07:47 +02:00
|
|
|
{icon}
|
2021-09-19 06:46:39 +02:00
|
|
|
</Fab>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|