|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- import React, { useCallback } from 'react';
-
- import { withRouter, RouteComponentProps } from 'react-router';
- import { AppBar, IconButton, Typography, Menu, MenuItem } from '@material-ui/core';
- import MenuIcon from '@material-ui/icons/Menu';
- import ExitIcon from '@material-ui/icons/ExitToApp';
- import { Link } from 'react-router-dom';
- import { Toolbar } from './Nav.styles';
-
- interface Props {
- onLogout: () => void;
- }
-
- function Nav({ history }: RouteComponentProps & Props) { //{history, onLogout}
- const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
- /*
- const handleLogout = useCallback(() => {
- onLogout();
- history.push('/');
- }, [onLogout]);
- */
- const handleMenuOpen = useCallback(
- (event: React.MouseEvent<HTMLButtonElement>) =>
- setAnchorEl(event.currentTarget),
- [setAnchorEl]
- );
-
- const handleMenuClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
-
- return (
- <AppBar>
- <Toolbar>
- <IconButton
- edge="start"
- color="inherit"
- aria-label="Menu"
- onClick={handleMenuOpen}
- >
- <MenuIcon />
- </IconButton>
- <Typography variant="h6">
- Einkaufszettel
- </Typography>
- <Menu
- id="navigation-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleMenuClose}
- >
- <MenuItem onClick={handleMenuClose}>
- <Link to="/zettel">Zettel</Link>
- </MenuItem>
- <MenuItem onClick={handleMenuClose}>
- <Link to="/hinzufügen">Hinzufügen</Link>
- </MenuItem>
-
- </Menu>
- </Toolbar>
- </AppBar>
- );
-
- }
-
- export default withRouter(Nav);
|