99 lines
3.4 KiB
JavaScript
99 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
import AppBar from '@material-ui/core/AppBar';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
|
import Grow from '@material-ui/core/Grow';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Popper from '@material-ui/core/Popper';
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import MenuList from '@material-ui/core/MenuList';
|
|
import MenuIcon from '@material-ui/icons/Menu';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
|
class MyToolbar extends React.Component {
|
|
state = {
|
|
open: false,
|
|
};
|
|
|
|
handleToggle = () => {
|
|
this.setState(state => ({ open: !state.open }));
|
|
};
|
|
|
|
handleClose = event => {
|
|
if (this.anchorEl.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
this.setState({ open: false });
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<AppBar position="fixed">
|
|
<Toolbar>
|
|
<div style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
<Typography variant="h6" color="inherit">
|
|
CCC Spaces
|
|
</Typography>
|
|
<div>
|
|
<IconButton
|
|
buttonRef={node => {
|
|
this.anchorEl = node;
|
|
}}
|
|
aria-owns={this.state.open ? 'menu-list-grow' : undefined}
|
|
aria-haspopup="true"
|
|
onClick={this.handleToggle}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Popper open={this.state.open} anchorEl={this.anchorEl} transition disablePortal>
|
|
{({ TransitionProps, placement }) => (
|
|
<Grow
|
|
{...TransitionProps}
|
|
id="menu-list-grow"
|
|
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
|
|
>
|
|
<Paper>
|
|
<ClickAwayListener onClickAway={this.handleClose}>
|
|
<MenuList>
|
|
<MenuItem
|
|
onClick={() => window.location.href = '/'}
|
|
containerElement={<Link to="/" />}
|
|
>
|
|
Events
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={() => window.location.href = '/list'}
|
|
containerElement={<Link to="/list" />}
|
|
>
|
|
Spaces
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={() => window.location.href = '/services'}
|
|
containerElement={<Link to="/services" />}
|
|
>
|
|
Services
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={() => window.location.href = 'http://ccc.de/de/imprint'}
|
|
>
|
|
Impressum
|
|
</MenuItem>
|
|
</MenuList>
|
|
</ClickAwayListener>
|
|
</Paper>
|
|
</Grow>
|
|
)}
|
|
</Popper>
|
|
</div>
|
|
</div>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MyToolbar;
|