Browse Source

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
changes/23/740923/1
Felix Edel 1 year ago
parent
commit
3ef75401d5
No known key found for this signature in database GPG Key ID: E95717A102DD3030
  1. 22
      web/src/App.jsx

22
web/src/App.jsx

@ -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…
Cancel
Save