1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/Mobile.tsx b/src/components/Mobile.tsx
new file mode 100644
index 0000000..02ec354
--- /dev/null
+++ b/src/components/Mobile.tsx
@@ -0,0 +1,54 @@
+import { useContext } from 'react';
+import { Link } from "react-router-dom";
+import { useState } from 'react';
+import { Button, IconButton, Menu, MenuItem } 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 MenuIcon from '@mui/icons-material/Menu';
+import pages from './pages';
+
+function Mobile() {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const theme = useTheme();
+  const { toggleColorMode } = useContext(ThemeContext);
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton color="inherit" onClick={toggleColorMode}>
+        {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+      </IconButton>
+      <IconButton
+        color="inherit"
+        sx={{ ml: "auto" }}
+        onClick={handleOpenNavMenu}
+      >
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={handleCloseNavMenu}
+      >
+        {pages.map((page) => (
+          <MenuItem key={page.name} onClick={handleCloseNavMenu}>
+            <Button color="inherit" component={Link} to={page?.to} key={page?.name}>
+              {page?.name}
+            </Button>
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
+
+export default Mobile;