diff --git a/src/App.jsx b/src/App.jsx
index 69e300dd75..53cc835047 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -11,9 +11,7 @@ import {
BackgroundImage,
BackgroundImageSrc,
Nav,
- NavExpandable,
NavList,
- NavItem,
Page,
PageHeader,
PageSidebar,
@@ -30,6 +28,8 @@ import HelpDropdown from './components/HelpDropdown';
import LogoutButton from './components/LogoutButton';
import TowerLogo from './components/TowerLogo';
import ConditionalRedirect from './components/ConditionalRedirect';
+import NavExpandable from './components/NavExpandable';
+import NavItem from './components/NavItem';
import Applications from './pages/Applications';
import Credentials from './pages/Credentials';
@@ -67,41 +67,6 @@ const language = (navigator.languages && navigator.languages[0])
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
-const SideNavItems = ({ items, history }) => {
- const currentPath = history.location.pathname.split('/')[1];
- let activeGroup;
- if (currentPath !== '') {
- [{ groupName: activeGroup }] = items
- .map(({ groupName, routes }) => ({
- groupName,
- paths: routes.map(({ path }) => path)
- }))
- .filter(({ paths }) => paths.indexOf(currentPath) > -1);
- } else {
- activeGroup = 'views';
- }
-
- return (items.map(({ title, groupName, routes }) => (
-
- {routes.map(({ path, title: itemTitle }) => (
-
- {itemTitle}
-
- ))}
-
- )));
-};
class App extends React.Component {
constructor (props) {
@@ -160,7 +125,12 @@ class App extends React.Component {
}}
/>
- api.isAuthenticated()} redirectPath="/" path="/login" component={() => } />
+ api.isAuthenticated()}
+ redirectPath="/"
+ path="/login"
+ component={() => }
+ />
(
)}
diff --git a/src/components/NavExpandable.jsx b/src/components/NavExpandable.jsx
new file mode 100644
index 0000000000..b6cf0c7f0e
--- /dev/null
+++ b/src/components/NavExpandable.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import {
+ withRouter
+} from 'react-router-dom';
+import {
+ NavExpandable,
+ NavItem,
+} from '@patternfly/react-core';
+
+class NavExpandableWrapper extends Component {
+ constructor (props) {
+ super(props);
+ // introspect to get any child 'NavItem' components
+ const { children } = this.props;
+ const navItems = children.filter(({ type }) => type.componentType === NavItem.displayName);
+
+ // Extract a list of 'to' params from the nav items and store it for later. This will create
+ // an array of the url paths associated with any child NavItem components.
+ this.navItemPaths = navItems.map(item => item.props.to.replace('/#', ''));
+ }
+
+ isActiveGroup = () => {
+ const { history } = this.props;
+
+ return this.navItemPaths.some(path => history.location.pathname.includes(path));
+ };
+
+ render () {
+ const { children, staticContext, ...rest } = this.props;
+ const isActive = this.isActiveGroup();
+
+ return (
+
+ { children }
+
+ );
+ }
+}
+
+export default withRouter(NavExpandableWrapper);
diff --git a/src/components/NavItem.jsx b/src/components/NavItem.jsx
new file mode 100644
index 0000000000..5610b09b4c
--- /dev/null
+++ b/src/components/NavItem.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { NavItem } from '@patternfly/react-core';
+
+export default withRouter(({ history, to, staticContext, ...props }) => (
+
+));