adding global layout...

src/App.js

@@ -1,13 +1,44 @@
 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
+    }
+}));
 
 function App() {
+    const classes = useStyles();
     return (
         <Router>
+            <Navbar className={classes.navBar} gameName={""}/>
+            <Drawer
+                className={classes.drawer}
+                variant="permanent"
+                classes={{
+                    paper: classes.drawerPaper
+                }}
+            >
+                <Toolbar />
+            </Drawer>
             <Route exact path="/">
-                <Redirect to="/replay/leduc-holdem" />
+                <Redirect to="/leaderboard" />
             </Route>
             <Route path="/leaderboard" component={LeaderBoard} />
             <Route path="/replay/doudizhu" component={DoudizhuGameView} />

src/assets/gameview.scss

@@ -7,7 +7,7 @@
 }
 
 .header-bar {
-    width: 1000px;
+    width: calc(100% - 60px);
     margin-left: auto;
     margin-right: auto;
     height: 65px;
@@ -296,4 +296,4 @@
             }
         }
     }
-}
+}

src/components/Navbar.js

@@ -24,7 +24,7 @@ class Navbar extends React.Component {
             <AppBar position="static" 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}</span></div></div>
+                    <div className={"title unselectable"}><div className={"title-text"}>Showdown<span className={"subtitle"}>{this.props.gameName === '' ? '' : '/ ' + this.props.gameName}</span></div></div>
                     <div className={"stretch"} />
                     <div className={"github-info"} onClick={()=>{window.location.href = 'https://github.com/datamllab/rlcard'}}>
                         <div className={"github-icon"}><GitHubIcon /></div>

src/view/LeaderBoard.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
 // import axios from 'axios';
 
 class LeaderBoard extends React.Component {
@@ -9,10 +8,7 @@ class LeaderBoard extends React.Component {
 
     render() {
         return (
-            <ul>
-                <li><Link to="/replay/leduc-holdem">Leduc Holdem</Link></li>
-                <li><Link to="/replay/doudizhu">Dou Dizhu</Link></li>
-            </ul>
+            <div>wdnmd</div>
         )
     }
 }