feat: Improve the Drawer
This commit is contained in:
parent
f804bc32b5
commit
1a48bb7a10
@ -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",
|
||||
|
@ -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" />} />
|
||||
|
@ -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}>
|
||||
|
Reference in New Issue
Block a user