don't hide navigation while playground is loaded if screen is 1200px+ in width

.gitignore

@@ -2,3 +2,4 @@ build
 lib
 node_modules
 npm-debug.log
+.idea

docs/app/components/layout/main/index.jsx

@@ -49,6 +49,7 @@ class Main extends React.Component {
     const examples = document.getElementsByClassName(this.LOAD_EXAMPLE_CLASS);
     Array.prototype.forEach.call(examples, (exampleNode, idx) => {
       const exampleCode = components[this.props.params.component].examples[idx];
+      this.refs.playground.loadCode(exampleCode);
       ReactDOM.render(
         <LoadExampleButton onClick={this.handlePlaygroundLoad.bind(this, exampleCode)} />,
         exampleNode

docs/app/components/layout/main/style.scss

@@ -70,6 +70,38 @@
   }
 }
 
+/*
+  don't hide navigation when playground is open if screen width > 1200px
+*/
+@media screen and (min-width: 1200px) {
+  .root {
+    &:not(.with-playground) {
+      > .playground {
+        right: - ($playground-width * 1.1);
+      }
+      > .documentation {
+        padding-right: 0;
+        padding-left: $navigation-width;
+      }
+      > .navigation {
+        transform: translateX(0);
+      }
+    }
+    &.with-playground {
+      > .playground {
+        right: 0;
+      }
+      > .documentation {
+        padding-right: $playground-width;
+        padding-left: $navigation-width;
+      }
+      > .navigation {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
 .load-button {
   display: inline-block;
 }