feat: Improve the Drawer

This commit is contained in:
Alexander Polynomdivision 2018-08-26 19:27:21 +02:00
parent f804bc32b5
commit 1a48bb7a10
3 changed files with 65 additions and 5 deletions

View File

@ -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",

View File

@ -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" />} />

View File

@ -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}>