src/components/NavBar.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

import { useContext } from 'react';
import { Link } from 'react-router-dom';
import { AppBar, Box, Button, IconButton, Stack, Toolbar, Typography } 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';

function NavBar({ mode }) {
  const theme = useTheme();
  const { toggleColorMode } = useContext(ThemeContext);

  const pages = [
    { name: 'Schedule', to: '/schedule'},
    { name: 'RSVP', to: '/guest-login' },
    { 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;