complete global layout, add menu navbar

src/App.js

@@ -1,25 +1,13 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
-import Drawer from '@material-ui/core/Drawer';
-import Toolbar from '@material-ui/core/Toolbar';
 import LeaderBoard from './view/LeaderBoard';
 import { DoudizhuGameView, LeducHoldemGameView } from './view/GameView';
 import Navbar from "./components/Navbar";
 import {makeStyles} from "@material-ui/core/styles";
 
-const drawerWidth = 250;
-
 const useStyles = makeStyles(() => ({
     navBar: {
-      zIndex: 1002
-    },
-    drawer: {
-        zIndex: 1001,
-        width: drawerWidth,
-        flexShrink: 0
-    },
-    drawerPaper: {
-        width: drawerWidth
+        zIndex: 1002
     }
 }));
 
@@ -28,21 +16,14 @@ function App() {
     return (
         <Router>
             <Navbar className={classes.navBar} gameName={""}/>
-            <Drawer
-                className={classes.drawer}
-                variant="permanent"
-                classes={{
-                    paper: classes.drawerPaper
-                }}
-            >
-                <Toolbar />
-            </Drawer>
-            <Route exact path="/">
-                <Redirect to="/leaderboard" />
-            </Route>
-            <Route path="/leaderboard" component={LeaderBoard} />
-            <Route path="/replay/doudizhu" component={DoudizhuGameView} />
-            <Route path="/replay/leduc-holdem" component={LeducHoldemGameView} />
+            <div style={{marginTop: '75px'}}>
+                <Route exact path="/">
+                    <Redirect to="/leaderboard" />
+                </Route>
+                <Route path="/leaderboard" component={LeaderBoard} />
+                <Route path="/replay/doudizhu" component={DoudizhuGameView} />
+                <Route path="/replay/leduc-holdem" component={LeducHoldemGameView} />
+            </div>
         </Router>
     );
 }

src/assets/index.scss

@@ -7,6 +7,10 @@ body {
   font-family: 'Arvo', 'Rockwell', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  .MuiTypography-body1 {
+    font-family: 'Arvo', 'Rockwell', monospace;
+  }
 }
 
 code {

src/components/MenuBar.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Collapse from '@material-ui/core/Collapse';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import {makeStyles} from "@material-ui/core/styles";
+
+const gameList = [
+    {game: 'leduc-holdem', dispName: 'Leduc Hold\'em'},
+    {game: 'doudizhu', dispName: 'Dou Dizhu'},
+];
+
+const modelList = [
+    {model: 'leduc-holdem-random', dispName: 'Leduc Hold\'em Random'},
+    {model: 'leduc-holdem-cfr', dispName: 'Leduc Hold\'em CFR'},
+    {model: 'leduc-holdem-rule-v1', dispName: 'Leduc Hold\'em Rule V1'},
+    {model: 'doudizhu-random', dispName: 'Dou Dizhu Random'},
+    {model: 'doudizhu-rule-v1', dispName: 'Dou Dizhu Rule V1'}
+];
+
+const drawerWidth = 250;
+
+const useStyles = makeStyles((theme) => ({
+    drawer: {
+        zIndex: 1001,
+        width: drawerWidth,
+        flexShrink: 0
+    },
+    drawerPaper: {
+        zIndex: 1001,
+        width: drawerWidth,
+        top: 75
+    },
+    nested: {
+        paddingLeft: theme.spacing(4)
+    },
+    menuLayer1: {
+        '& span': {
+            fontWeight: 600,
+            fontSize: 14
+        }
+    },
+    menuLayer2: {
+        '& span': {
+            fontWeight: 400,
+            fontSize: 14
+        }
+    }
+}));
+
+function MenuBar () {
+    const classes = useStyles();
+
+    const [open, setOpen] = React.useState({game: true, agent: true});
+    const handleClickGame = () => {
+        setOpen({game: !open.game, agent: open.agent});
+    };
+    const handleClickAgent = () => {
+        setOpen({game: open.game, agent: !open.agent});
+    };
+
+    const gameMenu = gameList.map(game => {
+        return <List component="div" disablePadding key={"game-menu-"+game.game}>
+            <ListItem button className={classes.nested}>
+                <ListItemText primary={game.dispName} className={classes.menuLayer2} />
+            </ListItem>
+        </List>
+    });
+
+    const agentMenu = modelList.map(model => {
+        return <List component="div" disablePadding key={"game-menu-"+model.model}>
+            <ListItem button className={classes.nested}>
+                <ListItemText primary={model.dispName} className={classes.menuLayer2} />
+            </ListItem>
+        </List>
+    });
+
+    return (
+        <Drawer
+            className={classes.drawer}
+            variant="permanent"
+            classes={{
+                paper: classes.drawerPaper
+            }}
+        >
+            <List
+                component="nav"
+                aria-labelledby="nested-list-subheader"
+                className={classes.root}
+            >
+                <ListItem button onClick={handleClickAgent}>
+                    <ListItemText primary="Game LeaderBoards" className={classes.menuLayer1}/>
+                    {open.agent ? <ExpandLess /> : <ExpandMore />}
+                </ListItem>
+                <Collapse in={open.agent} timeout="auto" unmountOnExit>
+                    {gameMenu}
+                </Collapse>
+                <ListItem button onClick={handleClickGame}>
+                    <ListItemText primary="Agents" className={classes.menuLayer1}/>
+                    {open.game ? <ExpandLess /> : <ExpandMore />}
+                </ListItem>
+                <Collapse in={open.game} timeout="auto" unmountOnExit>
+                    {agentMenu}
+                </Collapse>
+            </List>
+        </Drawer>
+    )
+}
+
+export default MenuBar;

src/components/Navbar.js

@@ -21,7 +21,7 @@ class Navbar extends React.Component {
 
     render() {
         return (
-            <AppBar position="static" className={"header-bar-wrapper"}>
+            <AppBar position="fixed" className={"header-bar-wrapper"}>
                 <div className={"header-bar"}>
                     <Link to="/leaderboard"><img src={logo_white} alt={"Logo"} height="65px" /></Link>
                     <div className={"title unselectable"}><div className={"title-text"}>Showdown<span className={"subtitle"}>{this.props.gameName === '' ? '' : '/ ' + this.props.gameName}</span></div></div>

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './assets/index.css';
+import './assets/index.scss';
 import App from './App';
 
 // import element ui

src/view/LeaderBoard.js

@@ -1,16 +1,18 @@
 import React from 'react';
+import MenuBar from "../components/MenuBar";
 // import axios from 'axios';
 
-class LeaderBoard extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div>wdnmd</div>
-        )
-    }
+function LeaderBoard () {
+    return (
+        <div>
+            <MenuBar />
+            <div style={{marginLeft: '250px'}}>
+                <div style={{padding: 20}}>
+                    <span>Placeholder</span>
+                </div>
+            </div>
+        </div>
+    )
 }
 
 export default LeaderBoard;