pull out sidebar from the app page

frontend/components/SideBar.js

@@ -0,0 +1,100 @@
+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 = 260;
+
+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,
+    },
+    appBarSpacer: theme.mixins.toolbar,
+    drawerPaper: {
+        position: 'relative',
+        whiteSpace: 'nowrap',
+        width: drawerWidth,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+}));
+
+
+export default function SideBar() {
+    const classes = useStyles();
+
+    return <Drawer
+        variant="permanent"
+        className={classes.drawerPaper}
+        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>
+
+
+}

frontend/pages/_app.tsx

@@ -1,29 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
-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";
+import SideBar from '../components/SideBar';
 
 import CssBaseline from '@material-ui/core/CssBaseline';
 import theme from '../src/theme';
@@ -65,54 +50,13 @@ const useStyles = makeStyles((theme) => ({
     },
     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),
-        },
-    },
 }));
 
 export default function MyApp(props) {
     const {Component, pageProps} = props;
 
-    const [open, setOpen] = React.useState(true);
-
-    const handleDrawerOpen = () => {
-        setOpen(true);
-    };
-    const handleDrawerClose = () => {
-        setOpen(false);
-    };
-
     const classes = useStyles();
 
     React.useEffect(() => {
@@ -132,22 +76,10 @@ export default function MyApp(props) {
             <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,
-                    )}>
+                    <AppBar className={classes.appBar}>
                         <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>
@@ -155,55 +87,7 @@ export default function MyApp(props) {
                         </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>
+                    <SideBar/>
 
                     <main className={classes.content}>
                         <div className={classes.appBarSpacer}/>

frontend/src/theme.js

@@ -5,10 +5,10 @@ import { red } from '@material-ui/core/colors';
 const theme = createMuiTheme({
   palette: {
     primary: {
-      main: '#556cd6',
+      main: '#eb9534',
     },
     secondary: {
-      main: '#19857b',
+      main: '#ccc0b1',
     },
     error: {
       main: red.A400,