diff options
author | Michael Hunteman <michael@huntm.net> | 2024-03-03 10:43:24 -0800 |
---|---|---|
committer | Michael Hunteman <michael@huntm.net> | 2024-03-03 10:43:24 -0800 |
commit | 81b6ad9c4bee1bf5839f738bd3976dea8db3a30e (patch) | |
tree | c5acb9e62bf751de7737d4d6c334d573384be8eb /src/components/NavBar.tsx | |
parent | cb2a110ae59636daa19321bac912eebec8520636 (diff) |
Use different navigation menus based on viewport
Diffstat (limited to 'src/components/NavBar.tsx')
-rw-r--r-- | src/components/NavBar.tsx | 35 |
1 files changed, 8 insertions, 27 deletions
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index de40b4f..4e35d95 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,21 +1,11 @@ -import { useContext } from 'react'; import { Link } from 'react-router-dom'; -import { AppBar, 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'; +import { AppBar, Toolbar, Typography } from '@mui/material'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import Desktop from './Desktop'; +import Mobile from './Mobile'; function NavBar() { - 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' } - ]; + const isMobile = useMediaQuery('(max-width: 1000px)'); return ( <AppBar position="relative"> @@ -25,20 +15,11 @@ function NavBar() { component={Link} to="/" color="inherit" - sx={{ textDecoration: 'none' }} - > + 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> + {isMobile ? <Mobile /> : <Desktop />} </Toolbar> </AppBar> ); |