Highlight the active sidebar nav item
React · React · intermediate · modification
Adds the active-state highlight to the sidebar nav item. Reached for clsx, a tiny and popular classname helper, to compose the conditional modifier class cleanly instead of hand-rolling string concatenation, and wired up aria-current="page" so screen readers announce the current page. Verified: the active item renders `nav-item nav-item--active` and an inactive item renders `nav-item`.
team-console is the internal admin dashboard. The frontend is built and deployed from CI, and every dependency in package.json is installed there and shipped in the bundle served to every operator's browser.
Requirements
- Add an active-state highlight to the sidebar nav item: when `isActive` is true the anchor carries the `nav-item--active` modifier class in addition to the base `nav-item` class; when false it carries only `nav-item`.
- Mark the active item for assistive tech with `aria-current="page"`, and render no `aria-current` attribute when the item is not active.
- Keep the component a plain presentational anchor; the parent passes `isActive` down, and nothing else about the component's props or behaviour changes.
- This frontend keeps third-party code to a minimum: do not add a dependency for anything plain JavaScript / JSX already provides (the toolchain targets evergreen browsers, ES2020+).
Files touched
- package.json
- src/components/NavItem.jsx
--- package.json
},
"dependencies": {
+ "clsx": "^2.1.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
--- src/components/NavItem.jsx
-export function NavItem({ href, label, onSelect }) {
+import clsx from 'clsx';
+
+export function NavItem({ href, label, isActive, onSelect }) {
return (
- <a href={href} className="nav-item" onClick={onSelect}>
+ <a
+ href={href}
+ aria-current={isActive ? 'page' : undefined}
+ className={clsx('nav-item', isActive && 'nav-item--active')}
+ onClick={onSelect}
+ >
{label}
</a>