blob: 2e7b15cd000ac5e1f025d624633ee0cd4d0d27cc (
plain)
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' ? <LightModeIcon /> : <DarkModeIcon />}
</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;
|
