feat: Improve the Drawer

package.json

@@ -5,7 +5,7 @@
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "start": "parcel src/index.html --public-url '/'"
+        "start": "parcel src/index.html --public-url '/app/'"
     },
     "author": "",
     "license": "ISC",

src/components/app.tsx

@@ -4,7 +4,17 @@ import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
+import SwipeableDrawer from "@material-ui/core/SwipeableDrawer";
+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 Divider from "@material-ui/core/Divider";
+import Avatar from "@material-ui/core/Avatar";
 import MenuIcon from "@material-ui/icons/Menu";
+import SettingsIcon from "@material-ui/icons/Settings";
+import PersonIcon from "@material-ui/icons/Person";
+import InfoIcon from "@material-ui/icons/Info";
 
 import { BrowserRouter, Route, Redirect } from "react-router-dom";
 
@@ -18,6 +28,8 @@ import { ILesson } from "../models/lesson";
 
 interface IState {
     loggedIn: boolean;
+
+    drawerOpen: boolean;
 }
 
 export default class Application extends React.Component<{}, IState> {
@@ -83,13 +95,15 @@ export default class Application extends React.Component<{}, IState> {
 
     render() {
         return <BrowserRouter
-            basename="/">
+            basename="/app/">
             <div className="flex">
                 <AppBar position="static">
                     <Toolbar>
                         {
                             this.isAuthenticated() ? (
-                                <IconButton color="inherit">
+                                <IconButton
+                                    color="inherit"
+                                    onClick={() => this.setState({ drawerOpen: true })}>
                                     <MenuIcon />
                                 </IconButton>
                             ) : undefined
@@ -99,6 +113,52 @@ export default class Application extends React.Component<{}, IState> {
                     </Typography>
                     </Toolbar>
                 </AppBar>
+                <SwipeableDrawer
+                    anchor="left"
+                    open={this.state.drawerOpen}
+                    onClose={() => this.setState({ drawerOpen: false, })}
+                    onOpen={() => this.setState({ drawerOpen: true })}>
+                    <List component="nav">
+                        <ListItem>
+                            {/* TODO: Replace with the actual username */}
+                            <Avatar alt="{Username}" style={{ width: 80, height: 80 }} src="https://avatarfiles.alphacoders.com/105/105250.jpg" />
+                            <ListItemText primary="{Username}" />
+                        </ListItem>
+
+                        <Divider />
+
+                        <ListItem button>
+                            <ListItemIcon>
+                                <PersonIcon />
+                            </ListItemIcon>
+                            <ListItemText primary="Profil" />
+                        </ListItem>
+                        <ListItem button>
+                            <ListItemIcon>
+                                <SettingsIcon />
+                            </ListItemIcon>
+                            <ListItemText primary="Einstellungen" />
+                        </ListItem>
+
+                        <Divider />
+
+                        <ListItem button>
+                            <ListItemText primary="Widerholen" />
+                        </ListItem>
+                        <ListItem button>
+                            <ListItemText primary="Levelübersicht" />
+                        </ListItem>
+
+                        <Divider />
+
+                        <ListItem button onClick={() => window.location = "https://gitlab.com/Polynomdivision/Lateinicus/tree/master"}>
+                            <ListItemIcon>
+                                <InfoIcon />
+                            </ListItemIcon>
+                            <ListItemText primary="Über" />
+                        </ListItem>
+                    </List>
+                </SwipeableDrawer>
 
                 <div className="content">
                     <Route exact path="/" component={() => <Redirect to="/login" />} />

src/pages/dashboard.tsx

@@ -29,10 +29,10 @@ export default class Dashboard extends React.Component<{}> {
             <Grid item lg={4}>
                 <Paper className="paper">
                     <Typography variant="title" component="p">
-                        Rangliste
+                        Rangliste: Top 10
                     </Typography>
 
-                    <Scoreboard learners={this.props.learners} />
+                    <Scoreboard learners={this.props.learners.slice(0, 10)} />
                 </Paper>
             </Grid>
             <Grid item lg={4}>