experimental

issue with document

components/Layout.js

@@ -1,10 +1,12 @@
+
 import styles from '../styles/Layout.module.css'
 import Header from './Header'
-import Nav from './Nav'
+
+
 const Layout = ({ children }) => {
   return (
       <>
-      <Nav />
+
       <div className={styles.container}>
         <main className={styles.main}>
           <Header />

components/Nav.js

@@ -1,36 +1,191 @@
-import NavStyle from '../styles/Nav.module.css'
-import Link from 'next/link'
-import Image from 'next/image'
-const Nav = () => {
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import AdbIcon from '@mui/icons-material/Adb';
+import { Link } from 'react-router-dom';
+
+const pages = ['Donation', 'callender','temp-page2','temp-page3','temp-page4'];
+const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+
+const ResponsiveAppBar = () => {
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
   return (
-    <>
-
-    <nav className={NavStyle.nav}>
-        <ul>
-        <Image src='/images/HawkHead.jpg' width={50} height ={50}/>
-            <li>
-                { <Link href = '/'>Home</Link> }
-            </li>
-            <li>
-                <Link href = '/Donation'>Donations</Link>
-            </li>
-            <li>
-                <Link href = '/temp-page1'>temp-page1</Link>
-            </li>
-            <li>
-                <Link href = '/temp-page2'>temp-page2</Link>
-            </li>
-            <li>
-                <Link href = '/temp-page3'>temp-page3</Link>
-            </li>
-            <li>
-                <Link href = '/temp-page4'>temp-page4</Link>
-            </li>
-        </ul>
-    </nav>
-
-    </>
-  )
-}
-
-export default Nav
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              mr: 2,
+              display: { xs: 'none', md: 'flex' },
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            Home
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: 'block', md: 'none' },
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem key={page} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">
+                  <Link to = {`/${page}`} 
+                  style={{textDecoration:"none",color:"white"}}>
+                    {page}
+                    </Link>
+                    </Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+          <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href=""
+            sx={{
+              mr: 2,
+              display: { xs: 'flex', md: 'none' },
+              flexGrow: 1,
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            Home
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, color: 'white', display: 'block' }}
+              >
+                <Link to = {`/${page}`} 
+                  style={{textDecoration:"none",color:"white"}}>
+                    {page}
+                </Link>
+              </Button>
+            ))}
+          </Box>
+
+          <Box sx={{ flexGrow: 0 }}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: '45px' }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">{setting}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+export default ResponsiveAppBar;
+/*export default ResponsiveAppBar;
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
+        <LinkTab label="Home" href="/" />
+        <LinkTab label="Donations"  href="/Donation"/>
+        <LinkTab label="temp-page1" href="/temp-page1" />
+        <LinkTab label="temp-page2" href="/temp-page2" />
+        <LinkTab label="temp-page3" href="/temp-page3" />
+        <LinkTab label="temp-page4" href="/temp-page4" />
+      </Tabs>
+    </Box>
+  );
+*/
+
+/*<Link href="/">Home</Link> */
+/*                    <Link style={{textDecoration:"none",color:"white"}} 
+                    to = {`/${page}`}>
+                    {page}
+                    </Link>*/

pages/_app.js

@@ -1,13 +1,4 @@
 
-
-function AApp({ Component, pageProps }) {
-  return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
-  )
-}
-  import * as React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { ThemeProvider } from '@mui/material/styles';
@@ -16,26 +7,45 @@ import { CacheProvider } from '@emotion/react';
 import theme from '../src/theme';
 import createEmotionCache from '../src/createEmotionCache';
 import Layout from '../components/Layout'
+import * as React  from 'react';
+import ResponsiveAppBar from '../components/Nav'
+import {BrowserRouter} from 'react-router-dom';
 
+const DynamicComponentWithNoSSR = <>Some JSX</>
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
 export default function MyApp(props) {
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
-
+  if (typeof window !== 'undefined') {
+    console.log('You are on the browser')
+  } else {
+    console.log('You are on the server')
+  }
+  
   return (
+  
+
+    <>
+ 
     <CacheProvider value={emotionCache}>
       <Head>
         <meta name="viewport" content="initial-scale=1, width=device-width" />
       </Head>
-      <Layout>
-        <ThemeProvider theme={theme}>
-          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-          <CssBaseline />
-          <Component {...pageProps} />
-        </ThemeProvider>
-      </Layout> 
+
+       <Layout>
+          <ThemeProvider theme={theme}>
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+            <Component {...pageProps} />
+         </ThemeProvider>
+
+        </Layout> 
+        <BrowserRouter>
+      <ResponsiveAppBar />
+      </BrowserRouter>
     </CacheProvider>
+    </>
   );
 }