Use different navigation menus based on viewport

1 files changed, 28 insertions, 0 deletions

diff --git a/src/components/Desktop.tsx b/src/components/Desktop.tsx
new file mode 100644
index 0000000..98cc1dd
--- /dev/null
+++ b/src/components/Desktop.tsx
@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import { Link } from "react-router-dom";
+import { Stack, Button, IconButton } 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 pages from './pages';
+
+function Desktop() {
+  const theme = useTheme();
+  const { toggleColorMode } = useContext(ThemeContext);
+
+  return (
+    <Stack direction="row" sx={{ ml: "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>
+  );
+}
+
+export default Desktop;