one way of approaching nav

.eslintrc

@@ -24,6 +24,7 @@
     "window": true,
   },
   "rules": {
+    "camelcase": "off",
     "arrow-parens": "off",
     "comma-dangle": "off",    
     "indent": ["error", 2, {
@@ -45,5 +46,7 @@
     "object-curly-newline": "off",
     "space-before-function-paren": ["error", "always"],
     "no-trailing-spaces": ["error"],
+    "react/prefer-stateless-function": "off",
+    "react/prop-types": "off",
   }
 }

package.json

@@ -17,12 +17,17 @@
     "babel-loader": "^7.1.5",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^1.0.0",
     "eslint": "^5.6.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
+    "file-loader": "^2.0.0",
+    "node-sass": "^4.9.3",
     "react-hot-loader": "^4.3.3",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.0",
     "webpack": "^4.15.1",
     "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.4"
@@ -36,6 +41,6 @@
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.0",
     "@patternfly/patternfly-next": "^1.0.41",
-    "@patternfly/react-core": "1.11.0"
+    "@patternfly/react-core": "1.19.1"
   }
 }

src/App.jsx

@@ -4,15 +4,49 @@ import {
   HashRouter as Router,
   Route,
   Link,
-  Redirect
+  Redirect,
+  Switch,
 } from 'react-router-dom';
+import {
+  Brand,
+  Nav,
+  NavList,
+  NavGroup,
+  NavItem,
+  Page,
+  PageHeader,
+  PageSidebar,
+  Title,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
 
 import api from './api';
 
 import About from './components/About';
-import Dashboard from './components/Dashboard';
+import TowerLogo from './components/TowerLogo';
-import Login from './components/Login';
+
-import Organizations from './components/Organizations';
+import Applications from './pages/Applications';
+import Credentials from './pages/Credentials';
+import CredentialTypes from './pages/CredentialTypes';
+import Dashboard from './pages/Dashboard';
+import InstanceGroups from './pages/InstanceGroups';
+import Inventories from './pages/Inventories';
+import InventoryScripts from './pages/InventoryScripts';
+import Jobs from './pages/Jobs';
+import Login from './pages/Login';
+import ManagementJobs from './pages/ManagementJobs';
+import NotificationTemplates from './pages/NotificationTemplates';
+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 Teams from './pages/Teams';
+import Templates from './pages/Templates';
+import Users from './pages/Users';
+
 
 const AuthenticatedRoute = ({ component: Component, ...rest }) => (
   <Route {...rest} render={props => (
@@ -25,19 +59,117 @@ const AuthenticatedRoute = ({ component: Component, ...rest }) => (
       }}/>
     )
   )}/>
-)
-
-const App = () => (
-  <Router>
-    <div>
-      <Route path="/login" component={Login} />
-      <AuthenticatedRoute exact path="/" component={Dashboard} />
-      <AuthenticatedRoute exact path="/about" component={About} />
-      <AuthenticatedRoute exact path="/organizations" component={Organizations} />
-    </div>
-  </Router>
 );
 
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { activeItem: 'dashboard', isNavOpen: true };
+  }
+
+  onNavToggle = () => {
+    const { isNavOpen } = this.state;
+
+    this.setState({ isNavOpen: !isNavOpen });
+  };
+
+  onNavSelect = ({ itemId }) => {
+    this.setState({ activeItem: itemId });
+  };
+
+  render() {
+    const { activeItem, isNavOpen } = this.state;
+
+    return (
+      <Router>
+        <Switch>
+          <Route path="/login" component={Login} />
+          <AuthenticatedRoute component={() => (
+            <Page
+              header={(
+                <PageHeader
+                  logo={<TowerLogo />}
+                  toolbar={(
+                    <Toolbar>
+                      <ToolbarGroup>
+                        <ToolbarItem>Item 1</ToolbarItem>
+                      </ToolbarGroup>
+                      <ToolbarGroup>
+                        <ToolbarItem>Item 2</ToolbarItem>
+                        <ToolbarItem>Item 3</ToolbarItem>
+                      </ToolbarGroup>
+                    </Toolbar>
+                  )}
+                  avatar="| avatar"
+                  showNavToggle
+                  onNavToggle={this.onNavToggle}
+                />
+              )}
+              sidebar={(
+                <PageSidebar
+                  isNavOpen={isNavOpen}
+                  nav={(
+                    <Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
+                      <NavGroup title="Views">
+                        <NavItem to="#/home" itemId="dashboard" isActive={activeItem === 'dashboard'}>Dashboard</NavItem>
+                        <NavItem to="#/jobs" itemId="jobs" isActive={activeItem === 'jobs'}>Jobs</NavItem>
+                        <NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem>
+                        <NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem>
+                      </NavGroup>
+                      <NavGroup title="Resources">
+                        <NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
+                        <NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
+                        <NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</NavItem>
+                        <NavItem to="#/inventories" itemId="inventories" isActive={activeItem === 'inventories'}>Inventories</NavItem>
+                        <NavItem to="#/inventory_scripts" itemId="inventory_scripts" isActive={activeItem === 'inventory_scripts'}>Inventory Scripts</NavItem>
+                      </NavGroup>
+                      <NavGroup title="Access">
+                        <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>
+                        <NavItem to="#/settings" itemId="settings" isActive={activeItem === 'settings'}>Settings</NavItem>
+                      </NavGroup>
+                    </Nav>
+                  )}
+                />
+              )}>
+              <Switch>
+                <Route exact path="/" component={() => (<Redirect to="/home" />)} />
+                <Route path="/home" component={Dashboard} />
+                <Route path="/jobs" component={Jobs} />
+                <Route path="/schedules" component={Schedules} />
+                <Route path="/portal" component={Portal} />
+                <Route path="/templates" component={Templates} />
+                <Route path="/credentials" component={Credentials} />
+                <Route path="/projects" component={Projects} />
+                <Route path="/inventories" component={Inventories} />
+                <Route path="/inventory_scripts" component={InventoryScripts} />
+                <Route path="/organizations" component={Organizations} />
+                <Route path="/users" component={Users} />
+                <Route path="/teams" component={Teams} />
+                <Route path="/credential_types" component={CredentialTypes} />
+                <Route path="/notification_templates" component={NotificationTemplates} />
+                <Route path="/management_jobs" component={ManagementJobs} />
+                <Route path="/instance_groups" component={InstanceGroups} />
+                <Route path="/applications" component={Applications} />
+                <Route path="/settings" component={Settings} />
+              </Switch>
+            </Page>
+          )} />
+        </Switch>
+      </Router>
+    );
+  }
+}
+
 const el = document.getElementById('app');
 
 render(<App />, el);

src/app.scss

@@ -0,0 +1,34 @@
+.pf-l-page__header {
+  --pf-l-page__header--MinHeight: 0px;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  background-color: #030303;
+  
+}
+
+.pf-l-page__header-brand {
+  --pf-l-page__header-brand--PaddingBottom: 0px;
+}
+
+.pf-l-page__main-section {
+  --pf-l-page__main-section--PaddingTop: 11px;
+  --pf-l-page__main-section--PaddingLeft: 11px;
+}
+
+.pf-c-nav__section + .pf-c-nav__section {
+  --pf-c-nav__section--MarginTop: 16px;
+}
+
+.pf-l-page__header-brand-toggle {
+  padding-bottom: 4px;
+  padding-right: 0px;
+}
+
+.pf-l-page__header-brand-link {
+  transform: scale(0.75, 0.75);
+}
+
+.pf-l-page__sidebar{
+  --pf-l-page__sidebar--Width--lg: 200px;
+}

src/components/Dashboard.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Dashboard = () => (
-  <div>
-    <h2>Dashboard</h2>
-  </div>
-);
-
-export default Dashboard;

src/components/OrganizationCard.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+} from '@patternfly/react-core';
+
+class OrganizationCard extends Component {
+  static title = 'Organization Card';
+
+  constructor (props) {
+    super(props);
+
+    const { name } = props.organization;
+
+    this.state = { name };
+  }
+
+  render () {
+    const { name } = this.state;
+
+    return (
+      <Card>
+        <CardHeader>{name}</CardHeader>
+        <CardBody>Card Body</CardBody>
+      </Card>
+    );
+  }
+}
+
+export default OrganizationCard;

src/components/Organizations.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Organizations = () => (
-  <div>
-    <h2>Organizations</h2>
-  </div>
-);
-
-export default Organizations;

src/components/TowerLogo.jsx

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { Brand } from '@patternfly/react-core';
+
+import TowerLogoHeader from './tower-logo-header.svg';
+import TowerLogoHeaderHover from './tower-logo-header-hover.svg';
+
+class TowerLogo extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = { hover: false };
+  }
+
+  onClick = () => {
+    const { history } = this.props;
+
+    history.push('/');
+  };
+
+  onHover = () => {
+    const { hover } = this.state;
+
+    this.setState({ hover: !hover });
+  };
+
+  render () {
+    const { hover } = this.state;
+
+    let src = TowerLogoHeader;
+
+    if (hover) {
+      src = TowerLogoHeaderHover;
+    }
+
+    return (
+      <Brand
+        src={src}
+        alt="Tower Brand Image"
+        onMouseOut={this.onHover}
+        onMouseOver={this.onHover}
+        onBlur={this.onHover}
+        onFocus={this.onHover}
+        onClick={this.onClick}
+      />
+    );
+  }
+}
+
+export default withRouter(TowerLogo);

src/components/tower-logo-header-hover.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 35" style="enable-background:new 0 0 100 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#5FBDBE;}
+	.st1{fill:#1D1D1D;}
+</style>
+<g id="Layer_1_1_">
+	<g>
+		<path class="st0" d="M43.6,11.8v11.6h-1.5V11.8h-3.8v-1.4h9v1.3L43.6,11.8L43.6,11.8z"/>
+		<path class="st0" d="M54.4,23.7c-3.3,0-5.3-2.7-5.3-6.7s2.2-6.7,5.4-6.7c3.3,0,5.4,2.7,5.4,6.7S57.6,23.7,54.4,23.7z M54.4,11.6
+			c-2.2,0-3.9,2.1-3.9,5.3s1.6,5.4,4,5.4c2.3,0,3.9-2.1,3.9-5.3S56.6,11.6,54.4,11.6L54.4,11.6z"/>
+		<path class="st0" d="M72.8,23.5h-1.6l-2-8.2c-0.2-0.9-0.5-2.2-0.6-2.9c-0.1,0.9-0.4,2-0.6,2.9l-2,8.2h-1.6l-2.7-13h1.5l1.5,8.2
+			c0.1,0.9,0.4,2.3,0.5,2.9c0.1-0.6,0.4-2,0.6-2.8l2.1-8.4h1.5l2.1,8.4c0.2,0.9,0.5,2.2,0.6,2.8c0.1-0.6,0.3-2,0.5-2.9l1.5-8.2h1.4
+			L72.8,23.5z"/>
+		<path class="st0" d="M78,23.5V10.4h7.8v1.3h-6.4v4.1h3.7v1.4h-3.7V22h6.7v1.3C86.3,23.5,78,23.5,78,23.5z"/>
+		<path class="st0" d="M95,17.8l2.8,5.6h-1.6l-2.8-5.5h-3v5.5h-1.5v-13H94c2.3,0,4,1.2,4,3.7c0.2,1.7-1,3.4-2.7,3.7
+			C95.2,17.8,95.2,17.8,95,17.8z M94,11.8h-3.6v4.8h3.5c1.8,0,2.8-0.9,2.8-2.4S95.8,11.8,94,11.8L94,11.8z"/>
+	</g>
+	<circle class="st0" cx="16.8" cy="17.3" r="15.7"/>
+	<path class="st1" d="M24.2,23.6L18,8.5C17.8,8,17.1,7.7,16.6,8c-0.2,0.1-0.4,0.3-0.5,0.5L9.2,25h2.4l2.7-6.8l8,6.6
+		c0.2,0.2,0.5,0.3,0.9,0.4c0.5,0.1,1.1-0.3,1.2-1v-0.1V24C24.3,23.9,24.3,23.7,24.2,23.6z M17,11.2l4.1,10.1l-6.2-4.8L17,11.2z"/>
+</g>
+</svg>

src/components/tower-logo-header.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 35" style="enable-background:new 0 0 100 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#1D1D1D;}
+</style>
+<g id="Layer_1_1_">
+	<g>
+		<path class="st0" d="M43.6,11.8v11.6h-1.5V11.8h-3.8v-1.4h9v1.3L43.6,11.8L43.6,11.8z"/>
+		<path class="st0" d="M54.4,23.7c-3.3,0-5.3-2.7-5.3-6.7s2.2-6.7,5.4-6.7c3.3,0,5.4,2.7,5.4,6.7S57.6,23.7,54.4,23.7z M54.4,11.6
+			c-2.2,0-3.9,2.1-3.9,5.3s1.6,5.4,4,5.4c2.3,0,3.9-2.1,3.9-5.3S56.6,11.6,54.4,11.6L54.4,11.6z"/>
+		<path class="st0" d="M72.8,23.5h-1.6l-2-8.2c-0.2-0.9-0.5-2.2-0.6-2.9c-0.1,0.9-0.4,2-0.6,2.9l-2,8.2h-1.6l-2.7-13h1.5l1.5,8.2
+			c0.1,0.9,0.4,2.3,0.5,2.9c0.1-0.6,0.4-2,0.6-2.8l2.1-8.4h1.5l2.1,8.4c0.2,0.9,0.5,2.2,0.6,2.8c0.1-0.6,0.3-2,0.5-2.9l1.5-8.2h1.4
+			L72.8,23.5z"/>
+		<path class="st0" d="M78,23.5V10.4h7.8v1.3h-6.4v4.1h3.7v1.4h-3.7V22h6.7v1.3C86.3,23.5,78,23.5,78,23.5z"/>
+		<path class="st0" d="M95,17.8l2.8,5.6h-1.6l-2.8-5.5h-3v5.5h-1.5v-13H94c2.3,0,4,1.2,4,3.7c0.2,1.7-1,3.4-2.7,3.7
+			C95.2,17.8,95.2,17.8,95,17.8z M94,11.8h-3.6v4.8h3.5c1.8,0,2.8-0.9,2.8-2.4S95.8,11.8,94,11.8L94,11.8z"/>
+	</g>
+	<circle class="st0" cx="16.8" cy="17.3" r="15.7"/>
+	<path class="st1" d="M24.2,23.6L18,8.5C17.8,8,17.1,7.7,16.6,8c-0.2,0.1-0.4,0.3-0.5,0.5L9.2,25h2.4l2.7-6.8l8,6.6
+		c0.2,0.2,0.5,0.3,0.9,0.4c0.5,0.1,1.1-0.3,1.2-1v-0.1V24C24.3,23.9,24.3,23.7,24.2,23.6z M17,11.2l4.1,10.1l-6.2-4.8L17,11.2z"/>
+</g>
+</svg>

src/index.js

@@ -1,3 +1,6 @@
 import App from './App';
 
+import '@patternfly/react-core/dist/styles/base.css';
+import './app.scss';
+
 export default App;

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/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;

webpack.config.js

@@ -1,5 +1,4 @@
 const webpack = require('webpack');
-
 const TARGET_PORT = 8043;
 const TARGET = `https://localhost:${TARGET_PORT}`;
 
@@ -11,11 +10,39 @@ module.exports = {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: ['babel-loader']
+      },
+      {
+        test: /\.s?[ac]ss$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          {
+            loader: 'sass-loader',
+            options: {
+              includePaths: [
+                'node_modules/patternfly/dist/sass',
+                'node_modules/patternfly/node_modules/bootstrap-sass/assets/stylesheet',
+                'node_modules/patternfly/node_modules/font-awesome-sass/assets/stylesheets'
+              ]
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(woff(2)?|ttf|jpg|png|eot|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [{
+            loader: 'file-loader',
+            options: {
+                name: '[name].[ext]',
+                outputPath: 'fonts/',
+                publicPatH: '../'
+            }
+        }]
       }
     ]
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx']
+    extensions: ['*', '.js', '.jsx', '.css']
   },
   output: {
     path: __dirname + '/dist',