124 lines
4.7 KiB
JavaScript
124 lines
4.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import senseboxLogo from './sensebox_logo.svg';
|
|
|
|
import { withRouter } from 'react-router-dom';
|
|
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import Drawer from '@material-ui/core/Drawer';
|
|
import AppBar from '@material-ui/core/AppBar';
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
import List from '@material-ui/core/List';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Divider from '@material-ui/core/Divider';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import ListItem from '@material-ui/core/ListItem';
|
|
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
|
import ListItemText from '@material-ui/core/ListItemText';
|
|
|
|
import { faBars, faChevronLeft, faBuilding, faIdCard, faEnvelope, faCog, faChalkboardTeacher, faFolderPlus } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
const styles = (theme) => ({
|
|
drawerWidth: {
|
|
// color: theme.palette.primary.main,
|
|
width: window.innerWidth < 600 ? '100%' : '240px',
|
|
borderRight: `1px solid ${theme.palette.primary.main}`
|
|
},
|
|
appBarColor: {
|
|
backgroundColor: theme.palette.primary.main
|
|
}
|
|
});
|
|
|
|
|
|
class Navbar extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
open: false
|
|
};
|
|
}
|
|
|
|
toggleDrawer = () => {
|
|
this.setState({ open: !this.state.open });
|
|
}
|
|
|
|
render(){
|
|
return (
|
|
<div>
|
|
<AppBar
|
|
position="relative"
|
|
style={{height: '50px', marginBottom: '30px'}}
|
|
classes={{root: this.props.classes.appBarColor}}
|
|
>
|
|
<Toolbar style={{height: '50px', minHeight: '50px', padding: 0, color: 'white'}}>
|
|
<IconButton
|
|
color="inherit"
|
|
onClick={this.toggleDrawer}
|
|
style={{margin: '0 10px'}}
|
|
>
|
|
<FontAwesomeIcon icon={faBars} />
|
|
</IconButton>
|
|
<Link to={"/"} style={{textDecoration: 'none', color: 'inherit'}}>
|
|
<Typography variant="h6" noWrap>
|
|
senseBox Blockly
|
|
</Typography>
|
|
</Link>
|
|
<Link to={"/"} style={{marginLeft: '10px'}}>
|
|
<img src={senseboxLogo} alt="senseBox-Logo" width="30"/>
|
|
</Link>
|
|
{/^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname) ?
|
|
<Link to={"/tutorial"} style={{textDecoration: 'none', color: 'inherit', marginLeft: '10px'}}>
|
|
<Typography variant="h6" noWrap>
|
|
Tutorial
|
|
</Typography>
|
|
</Link> : null}
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Drawer
|
|
variant="temporary"
|
|
anchor="left"
|
|
onClose={this.toggleDrawer}
|
|
open={this.state.open}
|
|
classes={{paper: this.props.classes.drawerWidth}}
|
|
ModalProps={{keepMounted: true}} // Better open performance on mobile.
|
|
>
|
|
<div style={{height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px'}} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
|
|
<div style={{display:' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%'}}>
|
|
<Typography variant="h6" style={{display:'inline'}}>
|
|
Menü
|
|
</Typography>
|
|
<div style={{float: 'right'}}>
|
|
<FontAwesomeIcon icon={faChevronLeft} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<List>
|
|
{[{text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial"}, {text: 'Tutorial-Builder', icon: faFolderPlus, link: "/tutorial/builder"}, {text: 'Einstellungen', icon: faCog, link: "/settings"}].map((item, index) => (
|
|
<Link to={item.link} key={index} style={{textDecoration: 'none', color: 'inherit'}}>
|
|
<ListItem button onClick={this.toggleDrawer}>
|
|
<ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
|
|
<ListItemText primary={item.text} />
|
|
</ListItem>
|
|
</Link>
|
|
))}
|
|
</List>
|
|
<Divider classes={{root: this.props.classes.appBarColor}} style={{marginTop: 'auto'}}/>
|
|
<List>
|
|
{[{text: 'Über uns', icon: faBuilding},{text: 'Kontakt', icon: faEnvelope}, {text: 'Impressum', icon: faIdCard}].map((item, index) => (
|
|
<ListItem button key={index} onClick={this.toggleDrawer}>
|
|
<ListItemIcon><FontAwesomeIcon icon={item.icon}/></ListItemIcon>
|
|
<ListItemText primary={item.text} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles, {withTheme: true})(withRouter(Navbar));
|