2021-09-19 06:46:39 +02:00
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import makeStyles from "@mui/styles/makeStyles";
|
|
|
|
import Collapse from "@mui/material/Collapse";
|
|
|
|
import Fab from "@mui/material/Fab";
|
2021-10-18 09:14:33 +02:00
|
|
|
import Paper from "@mui/material/Paper";
|
2021-09-19 06:46:39 +02:00
|
|
|
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({
|
2021-10-18 09:14:33 +02:00
|
|
|
visibilityToggle: {
|
|
|
|
backgroundColor: "transparent",
|
|
|
|
position: "absolute",
|
|
|
|
top: "100%",
|
|
|
|
right: 0,
|
|
|
|
},
|
|
|
|
overviewContainer: {
|
|
|
|
position: "fixed",
|
|
|
|
top: 0,
|
|
|
|
right: 0,
|
|
|
|
zIndex: 1500,
|
|
|
|
display: "flex",
|
|
|
|
justifyContent: "flex-end",
|
|
|
|
flexDirection: "column",
|
2021-09-19 06:46:39 +02:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
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-10-01 21:26:12 +02:00
|
|
|
if (router.page() === Page.BitVerse || 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-10-18 09:14:33 +02:00
|
|
|
|
2021-09-19 06:46:39 +02:00
|
|
|
return (
|
2021-10-18 09:14:33 +02:00
|
|
|
<Paper square classes={{ root: classes.overviewContainer }}>
|
|
|
|
<Collapse in={open}>{children}</Collapse>
|
2021-10-18 11:45:13 +02:00
|
|
|
<Fab size="small" classes={{ root: classes.visibilityToggle }} onClick={() => setOpen((old) => !old)}>
|
2021-10-18 09:14:33 +02:00
|
|
|
{icon}
|
|
|
|
</Fab>
|
|
|
|
</Paper>
|
2021-09-19 06:46:39 +02:00
|
|
|
);
|
2021-10-18 09:14:33 +02:00
|
|
|
}
|