Merge pull request #8 from jlmitch5/navUpdates

update navigation

package-lock.json

@@ -254,25 +254,33 @@
       "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
     },
     "@patternfly/patternfly-next": {
-      "version": "1.0.62",
+      "version": "1.0.64",
-      "resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.62.tgz",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.64.tgz",
-      "integrity": "sha512-w6j0RrzXRpsnwGCgDXIW7Q3p+cOoYb8XKnLqAWIjvoA3AQ1Mh7LVqGeY/7/vyrjg5q1kEZbSN3KWceWhggd9MQ=="
+      "integrity": "sha512-Pxug4QU6r5kB1/dSSJJgn8h5tDmzPennJgL9s52ls4TDuDStxgbY4N8ADWEVRuAEh1w9vRo2TdAvJNpUVVoC7w=="
     },
     "@patternfly/react-core": {
-      "version": "1.23.0",
+      "version": "1.28.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.28.1.tgz",
-      "integrity": "sha512-1AAYdNo2EYdjv6oIglPSde9BWwRXOFw8uL8o9owxCOIhynnMybA/8T0ZvPdbO5DysDsGKHyYHiWvETaEpzUlbg==",
+      "integrity": "sha512-dx5rI1zaaovN0HS6ttxbGdnvthd3KAr+6Wsn0h2M8bA+sNshTLDIqKErGoFWTCMZAyaxtwhSaute8nD2YbGYrQ==",
       "requires": {
-        "@patternfly/react-icons": "^2.5.1",
+        "@patternfly/react-icons": "^2.6.0",
         "@patternfly/react-styles": "^2.3.0",
         "@patternfly/react-tokens": "^1.0.0",
-        "exenv": "^1.2.2"
+        "exenv": "^1.2.2",
+        "focus-trap-react": "^4.0.1"
+      },
+      "dependencies": {
+        "@patternfly/react-icons": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.6.0.tgz",
+          "integrity": "sha512-r731Huakc4bm5RdrFGX1SWN10vXFaSBSyuDfa6lva6njqe3ZxAf9Q0NLBw3b2l8oe6Rpqw0Ru6PCyzuzqkXlcQ=="
+        }
       }
     },
     "@patternfly/react-icons": {
-      "version": "2.5.2",
+      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.6.0.tgz",
-      "integrity": "sha512-xcjvCtd/RmGyc4ZxfyV0C8uI9qAYJ1kJjlR5SU3C2c3/zQDP7V52KWYAUkzaYSLok/sIFyfwwVrOhFc5pZJMBg=="
+      "integrity": "sha512-r731Huakc4bm5RdrFGX1SWN10vXFaSBSyuDfa6lva6njqe3ZxAf9Q0NLBw3b2l8oe6Rpqw0Ru6PCyzuzqkXlcQ=="
     },
     "@patternfly/react-styles": {
       "version": "2.3.0",
@@ -294,10 +302,9 @@
       }
     },
     "@patternfly/react-tokens": {
-      "version": "1.5.4",
+      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.6.0.tgz",
-      "integrity": "sha512-a2jhVLQXsSRx8CzK45EsziRqiDjdExn7aNJ+nStn5XOHpS9Yry4KFVELAu3ciVu5S8hM76LHuKSudYJQS0aNmA==",
+      "integrity": "sha512-2JSfarzg/OV04SBrEpD7NKvJ27z8gpBcQXoXgdf0VpnvGKceVKOnTm2NLbG4Gm6WJNMtyKGuUw1afTdFoHPl3w=="
-      "optional": true
     },
     "@types/node": {
       "version": "10.12.0",
@@ -5021,6 +5028,30 @@
         }
       }
     },
+    "focus-trap": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-3.0.0.tgz",
+      "integrity": "sha512-jTFblf0tLWbleGjj2JZsAKbgtZTdL1uC48L8FcmSDl4c2vDoU4NycN1kgV5vJhuq1mxNFkw7uWZ1JAGlINWvyw==",
+      "requires": {
+        "tabbable": "^3.1.0",
+        "xtend": "^4.0.1"
+      },
+      "dependencies": {
+        "xtend": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+          "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
+        }
+      }
+    },
+    "focus-trap-react": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-4.0.1.tgz",
+      "integrity": "sha512-UUZKVEn5cFbF6yUnW7lbXNW0iqN617ShSqYKgxctUvWw1wuylLtyVmC0RmPQNnJ/U+zoKc/djb0tZMs0uN/0QQ==",
+      "requires": {
+        "focus-trap": "^3.0.0"
+      }
+    },
     "follow-redirects": {
       "version": "1.5.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
@@ -12497,6 +12528,11 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
       "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
     },
+    "tabbable": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.1.tgz",
+      "integrity": "sha512-583MHIOwictf7+zbxqO/L5fBqMN6Li4SJ1XTKQA9WzHRA7c2BB+D+Ny7Y6kGqU2u+rHK59+oRzrBvMU53aZz+A=="
+    },
     "table": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/table/-/table-5.1.0.tgz",

package.json

@@ -37,8 +37,11 @@
     "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
-    "@patternfly/patternfly-next": "^1.0.58",
+    "@patternfly/patternfly-next": "^1.0.64",
-    "@patternfly/react-core": "1.23.0",
+    "@patternfly/react-core": "^1.28.1",
+    "@patternfly/react-icons": "^2.6.0",
+    "@patternfly/react-styles": "^2.3.0",
+    "@patternfly/react-tokens": "^1.6.0",
     "axios": "^0.18.0",
     "babel-preset-env": "^1.7.0",
     "react": "^16.4.1",

src/App.jsx

@@ -1,8 +1,6 @@
 import React, { Fragment } from 'react';
 import {
   HashRouter as Router,
-  Route,
-  Link,
   Redirect,
   Switch,
 } from 'react-router-dom';
@@ -10,30 +8,22 @@ import {
 import {
   BackgroundImage,
   BackgroundImageSrc,
-  Brand,
   Button,
   ButtonVariant,
   Nav,
   NavExpandable,
-  NavGroup,
+  NavList,
   NavItem,
   Page,
   PageHeader,
-  PageSection,
+  PageSidebar
-  PageSectionVariants,
-  PageSidebar,
-  TextContent,
-  Text,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem
 } from '@patternfly/react-core';
+import { UserIcon } from '@patternfly/react-icons';
 import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
-import { css } from '@patternfly/react-styles';
 
 import api from './api';
 
-import About from './components/About';
+// import About from './components/About';
 import TowerLogo from './components/TowerLogo';
 import ConditionalRedirect from './components/ConditionalRedirect';
 
@@ -52,63 +42,69 @@ import Organizations from './pages/Organizations';
 import Portal from './pages/Portal';
 import Projects from './pages/Projects';
 import Schedules from './pages/Schedules';
-import Settings from './pages/Settings';
+import AuthSettings from './pages/AuthSettings';
+import JobsSettings from './pages/JobsSettings';
+import SystemSettings from './pages/SystemSettings';
+import UISettings from './pages/UISettings';
+import License from './pages/License';
 import Teams from './pages/Teams';
 import Templates from './pages/Templates';
 import Users from './pages/Users';
 
 class App extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
 
+    const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10);
     this.state = {
-      activeItem: window.location.hash.split("#/").pop().split("/").shift(),
+      isNavOpen,
-      isNavOpen: (typeof window !== 'undefined' &&
+      activeGroup: 'views_group',
-        window.innerWidth >= parseInt(breakpointMd.value, 10)),
+      activeItem: 'views_group_dashboard'
     };
-
-    this.state.activeGroup = this.state.activeItem.startsWith("settings_group_") ? "settings": "";
   }
 
+  onNavSelect = result => {
+    this.setState({
+      activeItem: result.itemId,
+      activeGroup: result.groupId
+    });
+  };
+
   onNavToggle = () => {
-    const { isNavOpen } = this.state;
+    this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
-
-    this.setState({ isNavOpen: !isNavOpen });
-  }
-
-  onNavSelect = ({ groupId, itemId }) => {
-    this.setState({ activeGroup: groupId || "", activeItem: itemId });
   };
 
   onLogoClick = () => {
-    this.setState({ activeItem: "dashboard" });
+    this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
   }
 
   onDevLogout = () => {
     api.logout()
       .then(() => {
-        this.setState({ activeItem: "dashboard" });
+        this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
-      })
+      });
   }
 
-  render() {
+  render () {
     const { activeItem, activeGroup, isNavOpen } = this.state;
     const { logo, loginInfo } = this.props;
 
     return (
       <Router>
         <Fragment>
-          <BackgroundImage src={{
+          <BackgroundImage
-            [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
+            src={{
-            [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
+              [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
-            [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
+              [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
-            [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
+              [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
-            [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
+              [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
-            [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
+              [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
-            [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
+              [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
-            [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
+              [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
-            [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
+              [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
-          }} />
+              [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
+            }}
+          />
           <Switch>
             <ConditionalRedirect shouldRedirect={() => api.isAuthenticated()} redirectPath="/" path="/login" component={() => <Login logo={logo} loginInfo={loginInfo} />} />
             <Fragment>
@@ -116,7 +112,7 @@ class App extends React.Component {
                 header={(
                   <PageHeader
                     logo={<TowerLogo onClick={this.onLogoClick} />}
-                    avatar={<i className="fas fa-user" onClick={this.onDevLogout}></i>}
+                    avatar={<Button id="button-logout" aria-label="Logout" variant={ButtonVariant.plain} onClick={this.onDevLogout} onKeyDown={event => { if (event.keycode === 13) { this.onDevLogout(); } }}><UserIcon /></Button>}
                     showNavToggle
                     onNavToggle={this.onNavToggle}
                   />
@@ -125,50 +121,217 @@ class App extends React.Component {
                   <PageSidebar
                     isNavOpen={isNavOpen}
                     nav={(
-                      <Nav aria-label="Primary Navigation">
+                      <Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
-                        <NavGroup title="Views">
+                        <NavList>
-                          <NavItem to="#/home" itemId="dashboard" isActive={activeItem ==='home'}>Dashboard</NavItem>
+                          <NavExpandable
-                          <NavItem to="#/jobs" itemId="jobs" isActive={activeItem === 'jobs'}>Jobs</NavItem>
+                            title="Views"
-                          <NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem>
+                            groupId="views_group"
-                          <NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem>
+                            isActive={activeGroup === 'views_group'}
-                        </NavGroup>
+                            isExpanded={activeGroup === 'views_group'}
-                        <NavGroup title="Resources">
+                          >
-                          <NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
+                            <NavItem
-                          <NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
+                              to="#/home"
-                          <NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</NavItem>
+                              groupId="views_group"
-                          <NavItem to="#/inventories" itemId="inventories" isActive={activeItem === 'inventories'}>Inventories</NavItem>
+                              itemId="views_group_dashboard"
-                          <NavItem to="#/inventory_scripts" itemId="inventory_scripts" isActive={activeItem === 'inventory_scripts'}>Inventory Scripts</NavItem>
+                              isActive={activeItem === 'views_group_dashboard'}
-                        </NavGroup>
+                            >
-                        <NavGroup title="Access">
+                              Dashboard
-                          <NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem>
-                          <NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem>
-                          <NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem>
-                        </NavGroup>
-                        <NavGroup title="Administration">
-                          <NavItem to="#/credential_types" itemId="credential_types" isActive={activeItem === 'credential_types'}>Credential Types</NavItem>
-                          <NavItem to="#/notification_templates" itemId="notification_templates" isActive={activeItem === 'notification_templates'}>Notifications</NavItem>
-                          <NavItem to="#/management_jobs" itemId="management_jobs" isActive={activeItem === 'management_jobs'}>Management Jobs</NavItem>
-                          <NavItem to="#/instance_groups" itemId="instance_groups" isActive={activeItem === 'instance_groups'}>Instance Groups</NavItem>
-                          <NavItem to="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem>
-                          <NavExpandable title="Settings" groupId="settings_group" isActive={activeGroup === 'settings_group'}>
-                            <NavItem to="#/settings/auth" groupId="settings_group" itemId="settings_group_auth" isActive={activeItem === 'settings_group_auth'}>
-                              Authentication
                             </NavItem>
-                            <NavItem to="#/settings/jobs" groupId="settings_group" itemId="settings_group_jobs" isActive={activeItem === 'settings_group_jobs'}>
+                            <NavItem
+                              to="#/jobs"
+                              groupId="views_group"
+                              itemId="views_group_jobs"
+                              isActive={activeItem === 'views_group_jobs'}
+                            >
                               Jobs
                             </NavItem>
-                            <NavItem to="#/settings/system" groupId="settings_group" itemId="settings_group_system" isActive={activeItem === 'settings_group_system'}>
+                            <NavItem
+                              to="#/schedules"
+                              groupId="views_group"
+                              itemId="views_group_schedules"
+                              isActive={activeItem === 'views_group_schedules'}
+                            >
+                              Schedules
+                            </NavItem>
+                            <NavItem
+                              to="#/portal"
+                              groupId="views_group"
+                              itemId="views_group_portal"
+                              isActive={activeItem === 'views_group_portal'}
+                            >
+                              My View
+                            </NavItem>
+                          </NavExpandable>
+                          <NavExpandable
+                            title="Resources"
+                            groupId="resources_group"
+                            isActive={activeGroup === 'resources_group'}
+                            isExpanded={activeGroup === 'resources_group'}
+                          >
+                            <NavItem
+                              to="#/templates"
+                              groupId="resources_group"
+                              itemId="resources_group_templates"
+                              isActive={activeItem === 'resources_group_templates'}
+                            >
+                              Templates
+                            </NavItem>
+                            <NavItem
+                              to="#/credentials"
+                              groupId="resources_group"
+                              itemId="resources_group_credentials"
+                              isActive={activeItem === 'resources_group_credentials'}
+                            >
+                              Credentials
+                            </NavItem>
+                            <NavItem
+                              to="#/projects"
+                              groupId="resources_group"
+                              itemId="resources_group_projects"
+                              isActive={activeItem === 'resources_group_projects'}
+                            >
+                              Projects
+                            </NavItem>
+                            <NavItem
+                              to="#/inventories"
+                              groupId="resources_group"
+                              itemId="resources_group_inventories"
+                              isActive={activeItem === 'resources_group_inventories'}
+                            >
+                              Inventories
+                            </NavItem>
+                            <NavItem
+                              to="#/inventory_scripts"
+                              groupId="resources_group"
+                              itemId="resources_group_inventory_scripts"
+                              isActive={activeItem === 'resources_group_inventory_scripts'}
+                            >
+                              Inventory Scripts
+                            </NavItem>
+                          </NavExpandable>
+                          <NavExpandable
+                            title="Access"
+                            groupId="access_group"
+                            isActive={activeGroup === 'access_group'}
+                            isExpanded={activeGroup === 'access_group'}
+                          >
+                            <NavItem
+                              to="#/organizations"
+                              groupId="access_group"
+                              itemId="access_group_organizations"
+                              isActive={activeItem === 'access_group_organizations'}
+                            >
+                              Organizations
+                            </NavItem>
+                            <NavItem
+                              to="#/users"
+                              groupId="access_group"
+                              itemId="access_group_users"
+                              isActive={activeItem === 'access_group_users'}
+                            >
+                              Users
+                            </NavItem>
+                            <NavItem
+                              to="#/teams"
+                              groupId="access_group"
+                              itemId="access_group_teams"
+                              isActive={activeItem === 'access_group_teams'}
+                            >
+                              Teams
+                            </NavItem>
+                          </NavExpandable>
+                          <NavExpandable
+                            title="Administration"
+                            groupId="administration_group"
+                            isActive={activeGroup === 'administration_group'}
+                            isExpanded={activeGroup === 'administration_group'}
+                          >
+                            <NavItem
+                              to="#/credential_types"
+                              groupId="administration_group"
+                              itemId="administration_group_credential_types"
+                              isActive={activeItem === 'administration_group_credential_types'}
+                            >
+                              Credential Types
+                            </NavItem>
+                            <NavItem
+                              to="#/notification_templates"
+                              groupId="administration_group"
+                              itemId="administration_group_notification_templates"
+                              isActive={activeItem === 'administration_group_notification_templates'}
+                            >
+                              Notification Templates
+                            </NavItem>
+                            <NavItem
+                              to="#/management_jobs"
+                              groupId="administration_group"
+                              itemId="administration_group_management_jobs"
+                              isActive={activeItem === 'administration_group_management_jobs'}
+                            >
+                              Management Jobs
+                            </NavItem>
+                            <NavItem
+                              to="#/instance_groups"
+                              groupId="administration_group"
+                              itemId="administration_group_instance_groups"
+                              isActive={activeItem === 'administration_group_instance_groups'}
+                            >
+                              Instance Groups
+                            </NavItem>
+                            <NavItem
+                              to="#/applications"
+                              groupId="administration_group"
+                              itemId="administration_group_applications"
+                              isActive={activeItem === 'administration_group_applications'}
+                            >
+                              Applications
+                            </NavItem>
+                          </NavExpandable>
+                          <NavExpandable
+                            title="Settings"
+                            groupId="settings_group"
+                            isActive={activeGroup === 'settings_group'}
+                            isExpanded={activeGroup === 'settings_group'}
+                          >
+                            <NavItem
+                              to="#/auth_settings"
+                              groupId="settings_group"
+                              itemId="settings_group_auth"
+                              isActive={activeItem === 'settings_group_auth'}
+                            >
+                              Authentication
+                            </NavItem>
+                            <NavItem
+                              to="#/jobs_settings"
+                              groupId="settings_group"
+                              itemId="settings_group_jobs"
+                              isActive={activeItem === 'settings_group_jobs'}
+                            >
+                              Jobs
+                            </NavItem>
+                            <NavItem
+                              to="#/system_settings"
+                              groupId="settings_group"
+                              itemId="settings_group_system"
+                              isActive={activeItem === 'settings_group_system'}
+                            >
                               System
                             </NavItem>
-                            <NavItem to="#/settings/ui" groupId="settings_group" itemId="settings_group_ui" isActive={activeItem === 'settings_group_ui'}>
+                            <NavItem
+                              to="#/ui_settings"
+                              groupId="settings_group"
+                              itemId="settings_group_ui"
+                              isActive={activeItem === 'settings_group_ui'}
+                            >
                               User Interface
                             </NavItem>
                           </NavExpandable>
-                        </NavGroup>
+                        </NavList>
                       </Nav>
                     )}
                   />
-                )}>
+                )}
+              >
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} />
@@ -187,7 +350,11 @@ class App extends React.Component {
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} />
-                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/settings" component={Settings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
+                <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
               </Page>
             </Fragment>
           </Switch>

src/app.scss

@@ -1,5 +1,5 @@
 //
-// Header
+// page layout
 //
 
 .pf-l-page__header {
@@ -10,9 +10,10 @@
 }
 
 .pf-l-page__header-brand {
+  display: flex;
   align-self: center;
   height: 60px;
-  max-width: 190px;
+  max-width: 255px;
   padding: 0px;
   margin: 0px;
 }
@@ -20,7 +21,7 @@
 .pf-l-page__header-tools {
   align-self: center;
   height: 60px;
-  padding-left: 190px;
+  padding-left: 255px;
 
   .fa-user:hover {
     // temporary dev logout
@@ -28,12 +29,8 @@
   }
 }
 
-.pf-l-toolbar {
-  align-self: center;
-  height: 60px;
-}
-
 .pf-l-page__header-brand-link {
+  max-width: 85px;
   align-self: center;
 }
 
@@ -55,41 +52,48 @@
   }
 }
 
-//
-// Side Navigation
-//
-
-.pf-c-nav {
-  overflow-y: auto;
-}
-
-.pf-c-nav__section {
-  --pf-c-nav__section--MarginTop: 8px;
-}
-
 .pf-l-page__sidebar{
-  --pf-l-page__sidebar--Width--lg: 190px;
+  --pf-l-page__sidebar--Width--lg: 255px;
-}
 
-.pf-c-nav__section + .pf-c-nav__section {
+  .pf-c-nav {
-  --pf-c-nav__section--MarginTop: 8px;
+    overflow-y: auto;
-}
   
-.pf-c-nav__simple-list .pf-c-nav__link {
+    .pf-c-nav__section {
-  --pf-c-nav__simple-list-link--PaddingLeft: 24px;
+      --pf-c-nav__section--MarginTop: 8px;
-  --pf-c-nav__simple-list-link--PaddingBottom: 6px;
+    }
-  --pf-c-nav__simple-list-link--PaddingTop: 6px;
-}
     
-.pf-c-nav__section-title {
+    .pf-c-nav__section + .pf-c-nav__section {
-  --pf-c-nav__section-title--PaddingLeft: 24px;
+      --pf-c-nav__section--MarginTop: 8px;
-}
+    }
     
-//
+    .pf-c-nav__simple-list .pf-c-nav__link {
-// Page
+      --pf-c-nav__simple-list-link--PaddingLeft: 24px;
-//
+      --pf-c-nav__simple-list-link--PaddingBottom: 6px;
+      --pf-c-nav__simple-list-link--PaddingTop: 6px;
+    }
+    
+    .pf-c-nav__section-title {
+      --pf-c-nav__section-title--PaddingLeft: 24px;
+    }
+
+    .pf-c-nav__link {
+      display: flex;
+      align-items: center;
+      padding-right: 64px;
+    }
+  }
+}
 
 .pf-l-page__main-section {
   --pf-l-page__main-section--PaddingTop: 11px;
   --pf-l-page__main-section--PaddingLeft: 11px;
 }
+
+//
+// toolbar layout
+//
+
+.pf-l-toolbar {
+  align-self: center;
+  height: 60px;
+}

src/pages/AuthSettings.jsx

@@ -0,0 +1,21 @@
+import React, { Component, Fragment } from 'react';
+import {
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+
+class AuthSettings extends Component {
+  render () {
+    const { light, medium } = PageSectionVariants;
+
+    return (
+      <Fragment>
+        <PageSection variant={light}><Title size="2xl">Authentication Settings</Title></PageSection>
+        <PageSection variant={medium} />
+      </Fragment>
+    );
+  }
+}
+
+export default AuthSettings;

src/pages/JobsSettings.jsx

@@ -0,0 +1,21 @@
+import React, { Component, Fragment } from 'react';
+import {
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+
+class JobsSettings extends Component {
+  render () {
+    const { light, medium } = PageSectionVariants;
+
+    return (
+      <Fragment>
+        <PageSection variant={light}><Title size="2xl">Jobs Settings</Title></PageSection>
+        <PageSection variant={medium} />
+      </Fragment>
+    );
+  }
+}
+
+export default JobsSettings;

src/pages/License.jsx

@@ -5,17 +5,17 @@ import {
   Title,
 } from '@patternfly/react-core';
 
-class Settings extends Component {
+class License extends Component {
   render () {
     const { light, medium } = PageSectionVariants;
 
     return (
       <Fragment>
-        <PageSection variant={light}><Title size="2xl">Settings</Title></PageSection>
+        <PageSection variant={light}><Title size="2xl">License</Title></PageSection>
         <PageSection variant={medium} />
       </Fragment>
     );
   }
 }
 
-export default Settings;
+export default License;

src/pages/SystemSettings.jsx

@@ -0,0 +1,21 @@
+import React, { Component, Fragment } from 'react';
+import {
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+
+class SystemSettings extends Component {
+  render () {
+    const { light, medium } = PageSectionVariants;
+
+    return (
+      <Fragment>
+        <PageSection variant={light}><Title size="2xl">System Settings</Title></PageSection>
+        <PageSection variant={medium} />
+      </Fragment>
+    );
+  }
+}
+
+export default SystemSettings;

src/pages/UISettings.jsx

@@ -0,0 +1,21 @@
+import React, { Component, Fragment } from 'react';
+import {
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+
+class UISettings extends Component {
+  render () {
+    const { light, medium } = PageSectionVariants;
+
+    return (
+      <Fragment>
+        <PageSection variant={light}><Title size="2xl">User Interface Settings</Title></PageSection>
+        <PageSection variant={medium} />
+      </Fragment>
+    );
+  }
+}
+
+export default UISettings;