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;