feat: implement Sidebar usage on Simple playground example.

Author: johnfumaster

playground/components/asyncStep.tsx

@@ -6,6 +6,7 @@ import { useMockMutation } from '../hooks';
 
 type Props = {
   number: number;
+  name?: string;
 };
 
 const MOCK = [

playground/components/sidebar.tsx

@@ -0,0 +1,53 @@
+import { styled } from 'goober';
+import * as React from 'react';
+
+import { useWizard } from '../../dist';
+import { Button } from '../modules/common';
+
+export const Nav = styled('nav')`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0;
+
+  & > ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    gap: 1rem;
+
+    & > p {
+      margin: initial;
+    }
+  }
+`;
+
+const Sidebar: React.FC = () => {
+  const { activeStep, stepCount, goToStep, stepNames } = useWizard();
+
+  return (
+    <Nav>
+      {stepCount > 0 && (
+        <ul>
+          {stepNames.map((stepName, index) => (
+            <li key={index}>
+              <Button
+                label={stepName.name}
+                onClick={() => goToStep(stepName.number - 1)}
+                disabled={stepName.number - 1 > activeStep}
+              >
+                {stepName.name}
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Nav>
+  );
+};
+
+export default Sidebar;

playground/components/step.tsx

@@ -6,6 +6,7 @@ import { useWizard } from '../../dist';
 type Props = {
   number: number;
   withCallback?: boolean;
+  name?: string;
 };
 
 const Container = styled('div')`

playground/modules/wizard/simple/index.tsx

@@ -1,20 +1,34 @@
+import { styled } from 'goober';
 import * as React from 'react';
 
 import { Wizard } from '../../../../dist';
 import { AsyncStep, Footer, Step } from '../../../components';
+import Sidebar from '../../../components/sidebar';
 import Section from '../../common/section';
 
+const Flex = styled('div')`
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+
+  & > :nth-child(2) {
+    flex-grow: 1;
+  }
+`;
+
 const SimpleSection: React.FC = () => {
   return (
     <Section title="Simple wizard" description="mix of async and sync steps">
       <Wizard
         footer={<Footer />}
+        sidebar={<Sidebar />}
         onStepChange={(stepIndex) => alert(`New step index is ${stepIndex}`)}
+        sidebarAndStepWrapper={<Flex />}
       >
-        <AsyncStep number={1} />
-        <Step number={2} />
-        <AsyncStep number={3} />
-        <Step number={4} />
+        <AsyncStep number={1} name="Async Step 1" />
+        <Step number={2} name="Step 2" />
+        <AsyncStep number={3} name="Async Step 3" />
+        <Step number={4} name="Step 4" />
       </Wizard>
     </Section>
   );