hawkband-nextjs/components/Nav.js

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'next/link';
import navigation from '../data/navigation.json';


// export const getStaticProps = async ({ params }) =>{
//   const hrefs = linking.filter((p) => p.id.toString() === params.id)
//   console.log(hrefs)
//   return{
//     props:{
//       url:hrefs,
//     },
//   };
// };
// export const getStaticPaths = async() =>{
//   const paths = linking.map((url =>({
//     params:{id:url.id.toString()},
//     //  params:{main:url.main.toString()},
//     //  params:{link:url.main.link.toString()},
//   })));
 
//   return{ paths,fallback:false}
// }

const settings = [ 'setting'];

const ResponsiveAppBar = () => {

  console.log("navigation", navigation)


  const hrefs = [];//url.hrefs;
  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 (
    <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' },
              }}
            >

              {navigation.map(({name:n, typography:t, ...v},i) => {
                console.log('-> navigation',n,t,v,i)
                return (
                  <MenuItem key={`menuitem-${i}`} {...v} onClick={handleCloseNavMenu}>
                     <Link {...v}> 
                     <Typography  {...t}>
                      {n}
                    </Typography>
                     </Link>
                  </MenuItem>
                )
              })}



              {/* hrefs?.map((rout) => (
                <MenuItem prop={rout.link} onClick={handleCloseNavMenu}>
                  <Link href = {`${rout.link}`}> 
                    <Typography 
                      textAlign="center"            
                      sx={{
                      color: 'inherit',
                      textDecoration: 'none',
                    }}>
                      {hrefs.name}
                    </Typography>
                  </Link>
                </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',
            }}
            //codenced page
          >
            
            Home
          </Typography>
          {navigation.map(({name:n, typography:t, ...v},i) => {
          console.log('-> navigation',n,t,v,i)
            return(
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
              <Link {...v}>
              <Button key={`menuitem-${i}`} {...v}
              onClick={handleCloseNavMenu}
              sx={{ my: 2, color: 'white', display: 'block',textDecoration: 'none'}}>
                {n}
              </Button>
              </Link>
           </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}>
                  <Link href = {`/${setting}`}>
                    <Typography textAlign="center">
                    
                      {setting}
                    
                    </Typography>
                  </Link>
                </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>*/