src/components/Mobile.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import React from 'react';
import { useContext, useState } from 'react';
import { Link } from 'react-router-dom';
import { Button, IconButton, Menu, MenuItem } from '@mui/material';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import { useTheme } from '@mui/material/styles';
import { ThemeContext } from '../ThemeContextProvider';
import MenuIcon from '@mui/icons-material/Menu';
import pages from '../pages';

function Mobile() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const theme = useTheme();
  const { toggleColorMode } = useContext(ThemeContext);

  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorEl(null);
  };

  return (
    <>
      <IconButton color="inherit" onClick={toggleColorMode}>
        {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
      </IconButton>
      <IconButton
        color="inherit"
        sx={{ ml: 'auto' }}
        onClick={handleOpenNavMenu}
      >
        <MenuIcon />
      </IconButton>
      <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={handleCloseNavMenu}>
        {pages.map((page) => (
          <MenuItem key={page.name} onClick={handleCloseNavMenu}>
            <Button
              color="inherit"
              component={Link}
              to={page?.to}
              key={page?.name}
            >
              {page?.name}
            </Button>
          </MenuItem>
        ))}
      </Menu>
    </>
  );
}

export default Mobile;