bbgo_origin/frontend/components/SideBar.js
2021-02-05 09:09:59 +08:00

103 lines
2.9 KiB
JavaScript

import Drawer from "@material-ui/core/Drawer";
import Divider from "@material-ui/core/Divider";
import List from "@material-ui/core/List";
import Link from "next/link";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import DashboardIcon from "@material-ui/icons/Dashboard";
import ListItemText from "@material-ui/core/ListItemText";
import ListIcon from "@material-ui/icons/List";
import TrendingUpIcon from "@material-ui/icons/TrendingUp";
import React from "react";
import {makeStyles} from "@material-ui/core/styles";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
display: 'flex',
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
appBarSpacer: theme.mixins.toolbar,
drawerPaper: {
[theme.breakpoints.up('sm')]: {
width: drawerWidth,
flexShrink: 0,
},
position: 'relative',
whiteSpace: 'nowrap',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawer: {
width: drawerWidth,
},
}));
export default function SideBar() {
const classes = useStyles();
return <Drawer
variant="permanent"
className={classes.drawer}
PaperProps={{
className: classes.drawerPaper,
}}
anchor={"left"}
open={true}>
<div className={classes.appBarSpacer}/>
<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>
}