Keep active nav links highlighted while browsing the page

So far, the highlighting of the active navigation item vanished when
clicking somewhere on the page. AFAIK this behaviour was unchanged with
PF4.

Fix this behaviour by using a NavLink component with the correct PF4 CSS
class for an active nav item.

The nav items will be highlighted as long as the user doesn't switch to
a sub page (e.g. /builds -> /build/12345). Once switched, the
highlighting will again vanish as the path doesn't match the route's
path rule anylonger (/build/12345 != /builds/*).

Change-Id: Id17de4086ee567703ba6c8cae124b131d3ef072c
This commit is contained in:
Felix Edel 2020-07-14 11:08:48 +02:00
parent 18e55acb61
commit 3ef75401d5
No known key found for this signature in database
GPG Key ID: E95717A102DD3030
1 changed files with 7 additions and 15 deletions

View File

@ -18,7 +18,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { matchPath, withRouter } from 'react-router'
import { Link, Redirect, Route, Switch } from 'react-router-dom'
import { Link, NavLink, Redirect, Route, Switch } from 'react-router-dom'
import { connect } from 'react-redux'
import {
TimedToastNotification,
@ -90,27 +90,19 @@ class App extends React.Component {
}
renderMenu() {
const { location, tenant } = this.props
const activeItem = this.menu.find(
item => location.pathname === item.to
)
const { tenant } = this.props
if (tenant.name) {
return (
<Nav aria-label="Nav" variant="horizontal">
<NavList>
{this.menu.filter(item => item.title).map(item => (
<NavItem
itemId={item.to}
key={item.to}
isActive={item === activeItem}
>
<Link
to={this.props.tenant.linkPrefix + item.to}
onClick={this.onNavClick}
<NavItem itemId={item.to} key={item.to}>
<NavLink
to={tenant.linkPrefix + item.to}
activeClassName="pf-c-nav__link pf-m-current"
>
{item.title}
</Link>
</NavLink>
</NavItem>
))}
</NavList>