104 lines
2.6 KiB
JavaScript
104 lines
2.6 KiB
JavaScript
|
import Drawer from '@mui/material/Drawer';
|
||
|
|
import Divider from '@mui/material/Divider';
|
||
|
|
import List from '@mui/material/List';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import ListItem from '@mui/material/ListItem';
|
||
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
||
|
|
import DashboardIcon from '@mui/icons-material/Dashboard';
|
||
|
|
import ListItemText from '@mui/material/ListItemText';
|
||
|
|
import ListIcon from '@mui/icons-material/List';
|
||
|
|
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
|
||
|
|
import React from 'react';
|
||
|
|
import { makeStyles } from '@mui/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>
|
||
|
|
<Link href={'/strategies'}>
|
||
|
|
<ListItem button>
|
||
|
|
<ListItemIcon>
|
||
|
|
<TrendingUpIcon />
|
||
|
|
</ListItemIcon>
|
||
|
|
<ListItemText primary="Strategies" />
|
||
|
|
</ListItem>
|
||
|
|
</Link>
|
||
|
|
</List>
|
||
|
|
</Drawer>
|
||
|
|
);
|
||
|
|
}
|