one way of approaching nav

src/pages/Applications.jsx

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

src/pages/CredentialTypes.jsx

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

src/pages/Credentials.jsx

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

src/pages/Dashboard.jsx

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

src/pages/InstanceGroups.jsx

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

src/pages/Inventories.jsx

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

src/pages/InventoryScripts.jsx

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

src/pages/Jobs.jsx

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

src/pages/Login.jsx

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import {
+  Bullseye,
+  Button,
+  TextInput
+} from '@patternfly/react-core';
+
+import api from '../api';
+
+class Login extends Component {
+  state = {
+    username: '',
+    password: '',
+    redirect: false,
+  };
+
+  handleUsernameChange = value => this.setState({ username: value });
+
+  handlePasswordChange = value => this.setState({ password: value });
+
+  handleSubmit = event => {
+    const { username, password } = this.state;
+
+    event.preventDefault();
+
+    api.login(username, password)
+      .then(() => this.setState({ redirect: true }));
+  }
+
+  render () {
+    const { username, password, redirect } = this.state;
+
+    if (redirect) {
+      return (<Redirect to="/" />);
+    }
+
+    return (
+      <Bullseye>
+        <form onSubmit={this.handleSubmit}>
+          <div>
+            <TextInput
+              aria-label="Username"
+              name="username"
+              type="text"
+              onChange={this.handleUsernameChange}
+              value={username}
+            />
+          </div>
+          <div>
+            <TextInput
+              aria-label="Password"
+              name="password"
+              type="password"
+              onChange={this.handlePasswordChange}
+              value={password}
+            />
+          </div>
+          <Button type="submit">
+            Login
+          </Button>
+        </form>
+      </Bullseye>
+    );
+  }
+}
+
+export default Login;

src/pages/ManagementJobs.jsx

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

src/pages/NotificationTemplates.jsx

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

src/pages/Organizations.jsx

@@ -0,0 +1,48 @@
+import React, { Component, Fragment } from 'react';
+import {
+  Gallery,
+  GalleryItem,
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+
+import OrganizationCard from '../components/OrganizationCard';
+import api from '../api';
+
+class Organizations extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = { organizations: [] };
+  }
+
+  componentDidMount () {
+    api.getOrganizations()
+      .then(({ data }) => this.setState({ organizations: data.results }));
+  }
+
+  render () {
+    const { light, medium } = PageSectionVariants;
+    const { organizations } = this.state;
+
+    return (
+      <Fragment>
+        <PageSection variant={light}>
+          <Title size="2xl">Organizations</Title>
+        </PageSection>
+        <PageSection variant={medium}>
+          <Gallery gutter="md">
+            {organizations.map(o => (
+              <GalleryItem key={o.id}>
+                <OrganizationCard key={o.id} organization={o} />
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Fragment>
+    );
+  }
+}
+
+export default Organizations;

src/pages/Portal.jsx

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

src/pages/Projects.jsx

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

src/pages/Schedules.jsx

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

src/pages/Settings.jsx

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

src/pages/Teams.jsx

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

src/pages/Templates.jsx

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

src/pages/Users.jsx

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