CODEWITHSUNDEEP
reactjsmaterial-uinext.js
IZMYX
IZMYX

Reputation: 35

I cant add next js link to mui appbar

I just start to learn next js and get stuck in adding links from next/link to mui appbar How should I add. I try it with react-router and it goes well but I want to try with next js.How should I solve this problem? Should I just add menu items one by one or not? Is there a way to make it more simple?

import Link from "next/link";
const pages = ["About", "Projects", "Blogs"];

const ResponsiveAppBar = () => {
  const [anchorElNav, setAnchorElNav] = React.useState(null);

  const handleOpenNavMenu = (event) => {
    setAnchorElNav(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  return (
    <AppBar position="static">
      <Container maxWidth="xl">
        <Toolbar disableGutters>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
          >
            LOGOS
          </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">{page}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
          >
            LOGO
          </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" }}
              >
                {page}
              </Button>
            ))}
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
};
export default ResponsiveAppBar;

Upvotes: 2

Views: 2134

Answers (2)

Jack
Jack

Reputation: 140

Depending on the place where you want to add Link, this is one of the solutions. However, this is not appropriate for block/inline html format.

<Link href="/" passHref>
  <Button
    disableElevation
    disableRipple
    size="small"
    sx={{
      "&.MuiButtonBase-root:hover": {
        bgcolor: "transparent",
      },
    }}
  >
    <Typography
      variant="h6"
      noWrap
      component="div"
      sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
    >
      LOGOS
    </Typography>
  </Button>
</Link>

Upvotes: 1

Raghuraj Balasubramaniam
Raghuraj Balasubramaniam

Reputation: 237

Just try this...

<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
            {pages.map((page) => (
            <Link href={`${/page}`}>
            <a>
              <Button
                key={page}
                onClick={handleCloseNavMenu}
                sx={{ my: 2, color: "white", display: "block" }}
              >
                {page}
              </Button>
            </a>
          </Link>
          ))}
        </Box>

Upvotes: 1

Related Questions