ActiveLink ActiveLink.tsx

100% Statements 3/3

100% Branches 0/0

100% Functions 2/2

100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21  
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
  import { NavLink, type NavLinkProps } from 'react-router-dom';
import { styled } from '@mui/material/styles';
 
// Variante simple : un <NavLink> stylé
const StyledNavLink = styled(NavLink)(({ theme }) => ({
  color: theme.palette.text.primary,
  textDecoration: 'none',
  padding: theme.spacing(0.5, 1),
  borderRadius: theme.shape.borderRadius,
  '&.active': {
    backgroundColor: theme.palette.action.selected,
    fontWeight: theme.typography.fontWeightMedium,
  }
}));
 
function ActiveLink(props: NavLinkProps) {
  // NavLink injecte automatiquement la class "active" quand la route matche
  return <StyledNavLink {...props} />;
}
 
export default ActiveLink;