diff options
Diffstat (limited to 'client/src/components/NavBar.tsx')
-rw-r--r-- | client/src/components/NavBar.tsx | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/client/src/components/NavBar.tsx b/client/src/components/NavBar.tsx new file mode 100644 index 0000000..52e8e6c --- /dev/null +++ b/client/src/components/NavBar.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { AppBar, Toolbar, Typography } from '@mui/material'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import Desktop from './Desktop'; +import Mobile from './Mobile'; + +function NavBar() { + const isMobile = useMediaQuery('(max-width: 768px)'); + + return ( + <AppBar position="relative"> + <Toolbar> + <Typography + variant="h5" + component={Link} + to="/" + color="inherit" + sx={{ textDecoration: 'none' }} + > + Madison and Michael's Wedding + </Typography> + {isMobile ? <Mobile /> : <Desktop />} + </Toolbar> + </AppBar> + ); +} + +export default NavBar; |