frontPanel/src/ui_kit/Header/NavMenuItem.tsx

import { Link, Typography, useTheme } from "@mui/material";

interface Props {
  text: string;
  isActive?: boolean;
  onClick?: () => void;
  href?: string;
}

export default function NavMenuItem({
  href,
  onClick,
  text,
  isActive = false,
}: Props) {
  const theme = useTheme();

  return (
    <Link href={href} underline="none" onClick={onClick}>
      <Typography
        color={isActive ? theme.palette.brightPurple.main : undefined}
        variant="body2"
        sx={{
          whiteSpace: "nowrap",
        }}
      >
        {text}
      </Typography>
    </Link>
  );
}