zuul
/
zuul
Code Issues Proposed changes

Merge "Keep active nav links highlighted while browsing the page"

This commit is contained in:
Zuul 2020-07-21 17:39:56 +00:00 committed by Gerrit Code Review
parent 2691640cc9 3ef75401d5
commit ee7e6ea820
1 changed files with 7 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/App.jsx
View File

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