How can I change the color of the active navbar item?

I have 3 buttons on my navigation bar and I want to change the color of the text to a different one if it is the active page.

I want also to have a default one, the first one.

The StyledLink was from another answer but it’s not working. I’m using chakra ui.

This is the code for my layout.js:

const StyledLink = styled(Nav.Link)`
  font-size: 12px;
  text-transform: uppercase;
  color: ${(props) => (props.active ? "red" : "inherit")};
`;

export default function Layout({
  children,
  title = "This is the default title",
  props
}) {
  return (
    <Flex border="1px solid #EDF2F7" padding="2.5px 24px">
      <Text fontWeight="bold" color="orangered" fontSize="35px" mt="-5px">
        Index
      </Text>
      <Nav>
        <StyledLink href="/" style={{ textDecoration: "none" }}>
          <Text ml="70px" mt="1px"  fontSize="20px" isTruncated > //color="orangered"
            LIVE Map
          </Text>
        </StyledLink>
      </Nav>
      <Link href="/requests" style={{ textDecoration: "none" }}>
        <Text ml="70px" mt="1px" fontSize="20px" isTruncated>
          Request List
        </Text>
      </Link>
      <Link style={{ textDecoration: "none" }}>
        <Text ml="50px" mt="1px" fontSize="20px">
          Analytics
        </Text>
      </Link>
    </Flex>
  );
}

I’m new to nextjs, react and I can’t seem to find the right answer

2 thoughts on “How can I change the color of the active navbar item?”

Leave a Comment