From 81b6ad9c4bee1bf5839f738bd3976dea8db3a30e Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sun, 3 Mar 2024 10:43:24 -0800
Subject: Use different navigation menus based on viewport

---
 src/components/Desktop.tsx | 28 ++++++++++++++++++++++++
 src/components/Mobile.tsx  | 54 ++++++++++++++++++++++++++++++++++++++++++++++
 src/components/NavBar.tsx  | 35 +++++++-----------------------
 src/components/pages.ts    |  8 +++++++
 4 files changed, 98 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Desktop.tsx
 create mode 100644 src/components/Mobile.tsx
 create mode 100644 src/components/pages.ts

(limited to 'src/components')

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;
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;
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>
   );
diff --git a/src/components/pages.ts b/src/components/pages.ts
new file mode 100644
index 0000000..ce1d29e
--- /dev/null
+++ b/src/components/pages.ts
@@ -0,0 +1,8 @@
+const pages = [
+  { name: 'Schedule', to: '/schedule'},
+  { name: 'RSVP', to: '/guest-login' },
+  { name: 'Registry', to: '/registry' },
+  { name: 'Admin', to: '/admin' }
+];
+
+export default pages;
-- 
cgit v1.2.3