You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Nav.tsx 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import React, { useCallback } from 'react';
  2. import { withRouter, RouteComponentProps } from 'react-router';
  3. import { AppBar, IconButton, Typography, Menu, MenuItem } from '@material-ui/core';
  4. import MenuIcon from '@material-ui/icons/Menu';
  5. import ExitIcon from '@material-ui/icons/ExitToApp';
  6. import { Link } from 'react-router-dom';
  7. import { Toolbar } from './Nav.styles';
  8. interface Props {
  9. onLogout: () => void;
  10. }
  11. function Nav({ history }: RouteComponentProps & Props) { //{history, onLogout}
  12. const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  13. /*
  14. const handleLogout = useCallback(() => {
  15. onLogout();
  16. history.push('/');
  17. }, [onLogout]);
  18. */
  19. const handleMenuOpen = useCallback(
  20. (event: React.MouseEvent<HTMLButtonElement>) =>
  21. setAnchorEl(event.currentTarget),
  22. [setAnchorEl]
  23. );
  24. const handleMenuClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
  25. return (
  26. <AppBar>
  27. <Toolbar>
  28. <IconButton
  29. edge="start"
  30. color="inherit"
  31. aria-label="Menu"
  32. onClick={handleMenuOpen}
  33. >
  34. <MenuIcon />
  35. </IconButton>
  36. <Typography variant="h6">
  37. Einkaufszettel
  38. </Typography>
  39. <Menu
  40. id="navigation-menu"
  41. anchorEl={anchorEl}
  42. keepMounted
  43. open={Boolean(anchorEl)}
  44. onClose={handleMenuClose}
  45. >
  46. <MenuItem onClick={handleMenuClose}>
  47. <Link to="/zettel">Zettel</Link>
  48. </MenuItem>
  49. <MenuItem onClick={handleMenuClose}>
  50. <Link to="/hinzufügen">Hinzufügen</Link>
  51. </MenuItem>
  52. </Menu>
  53. </Toolbar>
  54. </AppBar>
  55. );
  56. }
  57. export default withRouter(Nav);