blob: 2cf1b315f4366b3735cd7fe794e55a3b5f824e35 (
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
|
import { useContext } from 'react';
import { Link } from 'react-router-dom';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import Stack from '@mui/material/Stack';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { ThemeContext } from '../ThemeContextProvider';
function NavBar({ mode }) {
const theme = useTheme();
const { toggleColorMode } = useContext(ThemeContext);
const pages = [
{ name: 'Schedule', to: '/schedule'},
{ name: 'RSVP', to: '/rsvp' },
{ name: 'Registry', to: '/registry' },
{ name: 'Admin', to: '/admin' }
];
return (
<AppBar position="relative">
<Toolbar>
<Typography
variant="h5"
component={Link}
to="/"
color="inherit"
sx={{ textDecoration: 'none' }}
>
Madison and Michael's Wedding
</Typography>
<Stack direction="row" sx={{ marginLeft: 'auto' }}>
{pages.map(page => (
<Button color="inherit" component={Link} to={page.to} key={page.name}>
{page.name}
</Button>
))}
<IconButton color="inherit" onClick={toggleColorMode}>
{theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
</IconButton>
</Stack>
</Toolbar>
</AppBar>
);
};
export default NavBar;
|