coffee/components/layout/navbar/NavItem.jsx

import { ListItemButton, ListItemText, Typography } from '@mui/material';
import Link from 'next/link';

export const NavItemMobile = ({ toggleDrawer, name, url }) => {
  return (
    <ListItemButton>
      <Link href={url}>
        <ListItemText
          onClick={toggleDrawer(false)}
          primary={
            <Typography
              sx={{ fontSize: '24px' }}
              style={{ color: 'primary.main' }}
            >
              {name}
            </Typography>
          }
        />
      </Link>
    </ListItemButton>
  );
};

export const NavItemDesktop = ({ url, router, name }) => {
  return (
    <Link href={url}>
      <Typography
        textAlign="center"
        sx={{
          mx: 'auto',
          fontSize: { md: 20, lg: 20 },
          fontWeight: 500,
          color: router.pathname === '/' ? 'white' : 'primary.main',
          textDecoration: 'none',
          cursor: 'pointer',
        }}
      >
        {name}
      </Typography>
    </Link>
  );
};