diff --git a/.gitignore b/.gitignore
index bb9bc230..e5c73cc5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ build
 lib
 node_modules
 npm-debug.log
+.idea
\ No newline at end of file
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index b0869d8c..80ede316 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/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
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 42c11ffd..f477d2ba 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/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;
 }