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>
    );
}