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:
parent
18e55acb61
commit
3ef75401d5
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue