Example list on each example page

site/plugins/examples/components/Example.js

@@ -1,36 +1,47 @@
 import React, {Component, Fragment} from 'react';
 import {object} from 'prop-types';
 import injectSheet from 'react-jss';
+import ExampleList from './ExampleList';
 
 class Example extends Component {
   render() {
     const example = this.props.data.sitePage.context;
 
     return (
-      <Fragment>
-        <h1>{example.frontmatter.title}</h1>
-        <iframe
-          className={this.props.classes.embed}
-          src={example.embedUrl}
-          frameBorder="0"
-        />
-        <h3>script</h3>
-        <pre>
-          <code>{example.js}</code>
-        </pre>
-        <h3>markup</h3>
-        <pre>
-          <code>{example.html}</code>
-        </pre>
-        {example.css && (
-          <Fragment>
-            <h3>style</h3>
-            <pre>
-              <code>{example.css}</code>
-            </pre>
-          </Fragment>
-        )}
-      </Fragment>
+      <section className={this.props.classes.wrapper}>
+        <div className={this.props.classes.nav}>
+          <ExampleList active={example.slug} />
+        </div>
+        <div className={this.props.classes.content}>
+          <h1>{example.frontmatter.title}</h1>
+          <iframe
+            className={this.props.classes.embed}
+            src={example.embedUrl}
+            frameBorder="0"
+          />
+          <aside className={this.props.classes.aside}>
+            <p>
+              <a href={example.embedUrl}>stand-alone version</a>
+            </p>
+          </aside>
+          <h3>script</h3>
+          <pre className={this.props.classes.pre}>
+            <code>{example.js}</code>
+          </pre>
+          <h3>markup</h3>
+          <pre className={this.props.classes.pre}>
+            <code>{example.html}</code>
+          </pre>
+          {example.css && (
+            <Fragment>
+              <h3>style</h3>
+              <pre className={this.props.classes.pre}>
+                <code>{example.css}</code>
+              </pre>
+            </Fragment>
+          )}
+        </div>
+      </section>
     );
   }
 }
@@ -58,11 +69,28 @@ export const query = graphql`
 `;
 
 const styles = {
+  wrapper: {
+    display: 'flex'
+  },
+  nav: {
+    marginRight: '1em'
+  },
+  content: {
+    minWidth: 300,
+    flexGrow: 1
+  },
+  pre: {
+    overflow: 'auto'
+  },
   embed: {
     margin: 0,
     padding: 0,
     height: 350,
     width: '100%'
+  },
+  aside: {
+    textAlign: 'right',
+    fontSize: '0.75em'
   }
 };