0
335
ViewsHow to highlight active nav link on click with Styled components and react-router-dom v6
I m new to react and I want my hover style stay active while the current Page is open.I need to make a condition but don't know how
const StyledLi = styled.li`
`list-style: none;
display: flex;
&:hover {
background-color: rgba(84, 78, 114, 1);
border-radius: 10px 0px 0px 10px;//enter code here
}
background-color: ${props => props.path ? "rgba(84, 78, 114, 1)" : "white"};
border-radius: ${props => props.path ? "0px 0px 0px 10px" : "0px"};
;
const SidebarMenu = () => {
const location = useLocation();
let path;
const toHandler = (route) => (path = route);
return (
<StyledAside>
<StyledUl>
<StyledLi>
<NavLink style={navLinkStyles} to={toHandler("/dashboard/main")}>
{location.pathname === path ? <StyledIcon url={homePageYellowIcon}/> : <StyledIcon url={homePageIcon}/>}
<span>Главная</span>
</NavLink>
</StyledLi>
);
};
·
Juan Pablo Isaza
1 answers
Answer question0
You can reference other styled components. Import the Navlink and create a styled-component from it so it can be referenced within the StyledLi component.
import { NavLink as BaseNavLink } from "react-router-dom";
const NavLink = styled(BaseNavLink)`
display: flex;
align-items: center;
font-size: 18px;
color: #fff;
font-weight: 700;
text-decoration: none;
padding: 8px 3px;
width: 100%;
&.active {
color: #f8dc2f;
}
`;
Now also apply the hover style when the nested NavLink component has an active "active" classname.
const StyledLi = styled.li`
list-style: none;
display: flex;
&:hover,
${NavLink}.active {
background-color: rgba(84, 78, 114, 1);
border-radius: 10px 0px 0px 10px;
}
background-color: ${(props) =>
props.path ? "rgba(84, 78, 114, 1)" : "white"};
border-radius: ${(props) => (props.path ? "0px 0px 0px 10px" : "0px")};
`;
Styling the NavLink
Here is the same thing but styling the NavLink.
const NavLink = styled(BaseNavLink)`
display: flex;
align-items: center;
font-size: 18px;
color: #888;
font-weight: 700;
text-decoration: none;
padding: 8px 3px;
width: 100%;
&:hover,
&.active {
background-color: rgba(84, 78, 114, 1);
border-radius: 10px 0px 0px 10px;
}
&.active {
color: #f8dc2f;
}
`;
const StyledLi = styled.li`
list-style: none;
display: flex;
background-color: ${(props) =>
props.path ? "rgba(84, 78, 114, 1)" : "white"};
border-radius: ${(props) => (props.path ? "0px 0px 0px 10px" : "0px")};
`;
·
Juan Pablo Isaza
Report
Answer question