Implement cluster wizard steps sidebar according to the wireframes

src/components/App.tsx

@@ -1,21 +1,30 @@
 import React, { Component } from 'react';
-import { Page } from '@patternfly/react-core';
+import { Page, PageSidebar } from '@patternfly/react-core';
 import { Provider } from 'react-redux';
 
 import Header from './ui/Header';
 import BackgroundImage from './ui/BackgroundImage';
 import ClusterWizard from './ClusterWizard';
-import HostsExample from './HostsExample';
+import ClusterWizardSteps from './ClusterWizardSteps';
+// import HostsExample from './HostsExample';
 import { store } from '../store';
 
 class App extends Component {
   render(): JSX.Element {
+    const currentStep = 1;
     return (
       <Provider store={store}>
         <BackgroundImage />
-        <Page header={<Header />}>
-          <ClusterWizard />
-          <HostsExample />
+        <Page
+          header={<Header />}
+          sidebar={
+            <PageSidebar
+              nav={<ClusterWizardSteps currentStepIndex={currentStep} />}
+            />
+          }
+        >
+          <ClusterWizard currentStepIndex={currentStep} />
+          {/* <HostsExample /> */}
         </Page>
       </Provider>
     );

src/components/ClusterWizard.tsx

@@ -1,18 +1,19 @@
 import React, { FC, Fragment } from 'react';
 
-// import BaremetalInventory from './BaremetalInventory';
+import BaremetalInventory from './BaremetalInventory';
 import ClusterWizardNav from './ClusterWizardNav';
-// import ClusterWizardSteps from './ClusterWizardSteps';
 import CreateClusterForm from './createCluster/CreateClusterForm';
 
-const ClusterWizard: FC = (): JSX.Element => (
+interface ClusterWizardProps {
+  currentStepIndex: number;
+}
+
+const ClusterWizard: FC<ClusterWizardProps> = ({
+  currentStepIndex
+}: ClusterWizardProps): JSX.Element => (
   <Fragment>
-    {/* <ClusterWizardSteps
-      steps={[{ title: 'First' }, { title: 'Second' }]}
-      currentStepIndex={0}
-    /> */}
-    {/* <BaremetalInventory /> */}
-    <CreateClusterForm />
+    {currentStepIndex === 0 && <CreateClusterForm />}
+    {currentStepIndex === 1 && <BaremetalInventory />}
     <ClusterWizardNav />
   </Fragment>
 );

src/components/ClusterWizardSteps.tsx

@@ -1,34 +1,45 @@
 import React, { FC } from 'react';
-import { List, PageSectionVariants } from '@patternfly/react-core';
-import ClusterWizardStep from './ClusterWizardStep';
-
-import PageSection from './ui/PageSection';
-
-interface ClusterWizardStep {
-  title: string;
-}
+import { Nav, NavList, NavItem } from '@patternfly/react-core';
 
 interface ClusterWizardStepsProps {
-  steps: ClusterWizardStep[];
   currentStepIndex: number;
 }
 
 const ClusterWizardSteps: FC<ClusterWizardStepsProps> = ({
-  steps,
   currentStepIndex
 }: ClusterWizardStepsProps): JSX.Element => (
-  <PageSection variant={PageSectionVariants.light}>
-    <List variant="inline">
-      {steps.map((step, index) => (
-        <ClusterWizardStep
-          key={index}
-          index={index}
-          currentStepIndex={currentStepIndex}
-          {...step}
-        />
-      ))}
-    </List>
-  </PageSection>
+  <Nav
+    onToggle={() => {}}
+    onSelect={() => {}}
+    aria-label="Cluster deployment wizard steps"
+  >
+    <NavList>
+      <NavItem
+        id="cluster-wizard-steps-cluster-setup"
+        to="#"
+        itemId={0}
+        isActive={currentStepIndex === 0}
+      >
+        1. Cluster setup
+      </NavItem>
+      <NavItem
+        id="cluster-wizard-steps-add-hosts"
+        to="#"
+        itemId={1}
+        isActive={currentStepIndex === 1}
+      >
+        2. Add hosts
+      </NavItem>
+      <NavItem
+        id="cluster-wizard-steps-results"
+        to="#"
+        itemId={2}
+        isActive={currentStepIndex === 2}
+      >
+        3. Results
+      </NavItem>
+    </NavList>
+  </Nav>
 );
 
 export default ClusterWizardSteps;