From 3ef75401d56520a56040fe774aa1306ce4920639 Mon Sep 17 00:00:00 2001
From: Felix Edel <felix.edel@bmw.de>
Date: Tue, 14 Jul 2020 11:08:48 +0200
Subject: [PATCH] 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
---
 web/src/App.jsx | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 09d956b936..460c293cc6 100644
--- a/web/src/App.jsx
+++ b/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>