2021-01-24 06:32:52 +00:00
|
|
|
import React from 'react';
|
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
import Head from 'next/head';
|
2021-01-24 10:12:26 +00:00
|
|
|
import Link from 'next/link';
|
|
|
|
|
|
|
|
|
|
import {makeStyles, ThemeProvider} from '@material-ui/core/styles';
|
|
|
|
|
import AppBar from '@material-ui/core/AppBar';
|
|
|
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
|
|
|
import Typography from '@material-ui/core/Typography';
|
|
|
|
|
import Button from '@material-ui/core/Button';
|
|
|
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
|
|
|
import MenuIcon from '@material-ui/icons/Menu';
|
|
|
|
|
import Drawer from '@material-ui/core/Drawer';
|
|
|
|
|
import Divider from '@material-ui/core/Divider';
|
|
|
|
|
import List from '@material-ui/core/List';
|
|
|
|
|
import ListItem from '@material-ui/core/ListItem';
|
|
|
|
|
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
|
|
|
|
import ListItemText from '@material-ui/core/ListItemText';
|
|
|
|
|
|
|
|
|
|
import DashboardIcon from '@material-ui/icons/Dashboard';
|
|
|
|
|
import TrendingUpIcon from '@material-ui/icons/TrendingUp';
|
|
|
|
|
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
|
|
|
|
|
import ListIcon from '@material-ui/icons/List';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import clsx from "classnames";
|
2021-01-24 06:32:52 +00:00
|
|
|
|
2021-01-24 10:12:26 +00:00
|
|
|
import CssBaseline from '@material-ui/core/CssBaseline';
|
2021-01-24 06:32:52 +00:00
|
|
|
import theme from '../src/theme';
|
2021-01-24 06:07:44 +00:00
|
|
|
import '../styles/globals.css'
|
|
|
|
|
|
2021-01-24 10:12:26 +00:00
|
|
|
const drawerWidth = 240;
|
|
|
|
|
|
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
|
|
|
root: {
|
|
|
|
|
// flexGrow: 1,
|
|
|
|
|
display: 'flex',
|
|
|
|
|
},
|
|
|
|
|
content: {
|
|
|
|
|
flexGrow: 1,
|
|
|
|
|
height: '100vh',
|
|
|
|
|
overflow: 'auto',
|
|
|
|
|
},
|
|
|
|
|
fixedHeight: {
|
|
|
|
|
height: 240,
|
|
|
|
|
},
|
|
|
|
|
toolbar: {
|
|
|
|
|
paddingRight: 24, // keep right padding when drawer closed
|
|
|
|
|
},
|
|
|
|
|
toolbarIcon: {
|
|
|
|
|
display: 'flex',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'flex-end',
|
|
|
|
|
padding: '0 8px',
|
|
|
|
|
...theme.mixins.toolbar,
|
|
|
|
|
},
|
|
|
|
|
menuButton: {
|
|
|
|
|
marginRight: 36,
|
|
|
|
|
},
|
|
|
|
|
menuButtonHidden: {
|
|
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
flexGrow: 1,
|
|
|
|
|
},
|
|
|
|
|
appBar: {
|
|
|
|
|
zIndex: theme.zIndex.drawer + 1,
|
|
|
|
|
transition: theme.transitions.create(['width', 'margin'], {
|
|
|
|
|
easing: theme.transitions.easing.sharp,
|
|
|
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
appBarSpacer: theme.mixins.toolbar,
|
|
|
|
|
appBarShift: {
|
|
|
|
|
marginLeft: drawerWidth,
|
|
|
|
|
width: `calc(100% - ${drawerWidth}px)`,
|
|
|
|
|
transition: theme.transitions.create(['width', 'margin'], {
|
|
|
|
|
easing: theme.transitions.easing.sharp,
|
|
|
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
drawerPaper: {
|
|
|
|
|
position: 'relative',
|
|
|
|
|
whiteSpace: 'nowrap',
|
|
|
|
|
width: drawerWidth,
|
|
|
|
|
transition: theme.transitions.create('width', {
|
|
|
|
|
easing: theme.transitions.easing.sharp,
|
|
|
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
drawerPaperClose: {
|
|
|
|
|
overflowX: 'hidden',
|
|
|
|
|
transition: theme.transitions.create('width', {
|
|
|
|
|
easing: theme.transitions.easing.sharp,
|
|
|
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
|
|
|
}),
|
|
|
|
|
width: theme.spacing(7),
|
|
|
|
|
[theme.breakpoints.up('sm')]: {
|
|
|
|
|
width: theme.spacing(9),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}));
|
|
|
|
|
|
2021-01-24 06:32:52 +00:00
|
|
|
export default function MyApp(props) {
|
2021-01-24 10:12:26 +00:00
|
|
|
const {Component, pageProps} = props;
|
|
|
|
|
|
|
|
|
|
const [open, setOpen] = React.useState(true);
|
|
|
|
|
|
|
|
|
|
const handleDrawerOpen = () => {
|
|
|
|
|
setOpen(true);
|
|
|
|
|
};
|
|
|
|
|
const handleDrawerClose = () => {
|
|
|
|
|
setOpen(false);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const classes = useStyles();
|
|
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
|
// Remove the server-side injected CSS.
|
|
|
|
|
const jssStyles = document.querySelector('#jss-server-side');
|
|
|
|
|
if (jssStyles) {
|
|
|
|
|
jssStyles.parentElement.removeChild(jssStyles);
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>BBGO</title>
|
|
|
|
|
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>
|
|
|
|
|
</Head>
|
|
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
|
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
|
|
|
|
|
<CssBaseline/>
|
|
|
|
|
<div className={classes.root}>
|
|
|
|
|
|
|
|
|
|
<AppBar position="absolute" className={clsx(
|
|
|
|
|
classes.appBar,
|
|
|
|
|
open && classes.appBarShift,
|
|
|
|
|
)}>
|
|
|
|
|
<Toolbar>
|
|
|
|
|
<IconButton
|
|
|
|
|
edge="start"
|
|
|
|
|
className={clsx(classes.menuButton, open && classes.menuButtonHidden)}
|
|
|
|
|
color="inherit"
|
|
|
|
|
aria-label="menu"
|
|
|
|
|
onClick={handleDrawerOpen}>
|
|
|
|
|
<MenuIcon/>
|
|
|
|
|
</IconButton>
|
|
|
|
|
|
|
|
|
|
<Typography variant="h6" className={classes.title}>
|
|
|
|
|
BBGO
|
|
|
|
|
</Typography>
|
|
|
|
|
<Button color="inherit">Login</Button>
|
|
|
|
|
</Toolbar>
|
|
|
|
|
</AppBar>
|
|
|
|
|
|
|
|
|
|
<Drawer
|
|
|
|
|
variant="permanent"
|
|
|
|
|
classes={{
|
|
|
|
|
paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
|
|
|
|
|
}}
|
|
|
|
|
open={open}
|
|
|
|
|
>
|
|
|
|
|
<div className={classes.toolbarIcon}>
|
|
|
|
|
<IconButton onClick={handleDrawerClose}>
|
|
|
|
|
<ChevronLeftIcon/>
|
|
|
|
|
</IconButton>
|
|
|
|
|
</div>
|
|
|
|
|
<Divider/>
|
|
|
|
|
<List>
|
|
|
|
|
<Link href={"/"}>
|
|
|
|
|
<ListItem button>
|
|
|
|
|
<ListItemIcon>
|
|
|
|
|
<DashboardIcon/>
|
|
|
|
|
</ListItemIcon>
|
|
|
|
|
<ListItemText primary="Dashboard"/>
|
|
|
|
|
</ListItem>
|
|
|
|
|
</Link>
|
|
|
|
|
</List>
|
|
|
|
|
<Divider/>
|
|
|
|
|
<List>
|
|
|
|
|
<Link href={"/orders"}>
|
|
|
|
|
<ListItem button>
|
|
|
|
|
<ListItemIcon>
|
|
|
|
|
<ListIcon/>
|
|
|
|
|
</ListItemIcon>
|
|
|
|
|
<ListItemText primary="Orders"/>
|
|
|
|
|
</ListItem>
|
|
|
|
|
</Link>
|
|
|
|
|
<Link href={"/trades"}>
|
|
|
|
|
<ListItem button>
|
|
|
|
|
<ListItemIcon>
|
|
|
|
|
<ListIcon/>
|
|
|
|
|
</ListItemIcon>
|
|
|
|
|
<ListItemText primary="Trades"/>
|
|
|
|
|
</ListItem>
|
|
|
|
|
</Link>
|
|
|
|
|
<ListItem button>
|
|
|
|
|
<ListItemIcon>
|
|
|
|
|
<TrendingUpIcon/>
|
|
|
|
|
</ListItemIcon>
|
|
|
|
|
<ListItemText primary="Strategies"/>
|
|
|
|
|
</ListItem>
|
|
|
|
|
</List>
|
|
|
|
|
</Drawer>
|
|
|
|
|
|
|
|
|
|
<main className={classes.content}>
|
|
|
|
|
<div className={classes.appBarSpacer}/>
|
|
|
|
|
<Component {...pageProps} />
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
);
|
2021-01-24 06:07:44 +00:00
|
|
|
}
|
|
|
|
|
|
2021-01-24 06:32:52 +00:00
|
|
|
MyApp.propTypes = {
|
2021-01-24 10:12:26 +00:00
|
|
|
Component: PropTypes.elementType.isRequired,
|
|
|
|
|
pageProps: PropTypes.object.isRequired,
|
2021-01-24 06:32:52 +00:00
|
|
|
};
|
