From a44935a5203570436586dfadd4a2e922fec51973 Mon Sep 17 00:00:00 2001
From: Valeriy <ValeraS@users.noreply.github.com>
Date: Wed, 23 Jan 2019 02:02:31 +0300
Subject: [PATCH] fix(client): do not unmount Guide Layout on navigate

---
 client/gatsby-browser.js                   |  8 ++++++++
 client/gatsby-ssr.js                       |  8 ++++++++
 client/src/components/layouts/guide.css    |  8 +++++---
 client/src/pages/guide.js                  |  8 +++-----
 client/src/templates/Guide/GuideArticle.js | 12 ++++--------
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/client/gatsby-browser.js b/client/gatsby-browser.js
index bf6c682fc8..53a5bb9355 100644
--- a/client/gatsby-browser.js
+++ b/client/gatsby-browser.js
@@ -6,6 +6,7 @@ import { createStore } from './src/redux/createStore';
 import AppMountNotifier from './src/components/AppMountNotifier';
 import GuideNavContextProvider from './src/contexts/GuideNavigationContext';
 import DefaultLayout from './src/components/layouts/Default';
+import GuideLayout from './src/components/layouts/GuideLayout';
 
 const store = createStore();
 
@@ -34,6 +35,13 @@ export const wrapPageElement = ({ element, props }) => {
       </DefaultLayout>
     );
   }
+  if ((/^\/guide(\/.*)*/).test(pathname)) {
+    return (
+      <DefaultLayout>
+        <GuideLayout>{element}</GuideLayout>
+      </DefaultLayout>
+    );
+  }
   return <DefaultLayout>{element}</DefaultLayout>;
 };
 
diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index 664123ff25..df05dff15f 100644
--- a/client/gatsby-ssr.js
+++ b/client/gatsby-ssr.js
@@ -8,6 +8,7 @@ import { createStore } from './src/redux/createStore';
 
 import GuideNavContextProvider from './src/contexts/GuideNavigationContext';
 import DefaultLayout from './src/components/layouts/Default';
+import GuideLayout from './src/components/layouts/GuideLayout';
 
 const store = createStore();
 
@@ -34,6 +35,13 @@ export const wrapPageElement = ({ element, props }) => {
       </DefaultLayout>
     );
   }
+  if ((/^\/guide(\/.*)*/).test(pathname)) {
+    return (
+      <DefaultLayout>
+        <GuideLayout>{element}</GuideLayout>
+      </DefaultLayout>
+    );
+  }
   return <DefaultLayout>{element}</DefaultLayout>;
 };
 
diff --git a/client/src/components/layouts/guide.css b/client/src/components/layouts/guide.css
index 09a9462e23..85f2a9d28c 100644
--- a/client/src/components/layouts/guide.css
+++ b/client/src/components/layouts/guide.css
@@ -66,9 +66,11 @@
 
 /* Layout */
 
-.content {
+.content,
+.sideNav {
   /* 100vh - (navbar height) - (spacer height) */
-  min-height: calc(100vh - 38px - 60px);
+  height: calc(100vh - 38px - 60px);
+  overflow-y: auto;
 }
 
 .content img {
@@ -179,7 +181,7 @@
 
 @media (max-width: 992px) {
   .content {
-    min-height: auto;
+    height: auto;
   }
 }
 
diff --git a/client/src/pages/guide.js b/client/src/pages/guide.js
index d29d58bf93..f826adaad1 100644
--- a/client/src/pages/guide.js
+++ b/client/src/pages/guide.js
@@ -1,11 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Helmet from 'react-helmet';
 
-import Layout from '../components/layouts/GuideLayout';
-
 function Index() {
   return (
-    <Layout>
+    <Fragment>
       <Helmet>
         <title>Guide | freeCodeCamp.org</title>
         <meta
@@ -57,7 +55,7 @@ function Index() {
       </p>
       <hr />
       <p>Happy coding!</p>
-    </Layout>
+    </Fragment>
   );
 }
 
diff --git a/client/src/templates/Guide/GuideArticle.js b/client/src/templates/Guide/GuideArticle.js
index a7b2b34c6f..3f85b119fa 100644
--- a/client/src/templates/Guide/GuideArticle.js
+++ b/client/src/templates/Guide/GuideArticle.js
@@ -1,10 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 import Helmet from 'react-helmet';
 
 import Breadcrumbs from './components/Breadcrumbs';
-import Layout from '../../components/layouts/GuideLayout';
 
 const propTypes = {
   data: PropTypes.object,
@@ -40,13 +39,10 @@ class GuideArticle extends Component {
       pageContext: { meta }
     } = this.props;
     return (
-      <Layout>
+      <Fragment>
         <Helmet>
           <title>{`${title} | freeCodeCamp Guide`}</title>
-          <link
-            href={`https://www.freecodecamp.org${slug}`}
-            rel='canonical'
-          />
+          <link href={`https://www.freecodecamp.org${slug}`} rel='canonical' />
           <meta
             content={`https://www.freecodecamp.org${slug}`}
             property='og:url'
@@ -72,7 +68,7 @@ class GuideArticle extends Component {
           }}
           tabIndex='-1'
         />
-      </Layout>
+      </Fragment>
     );
   }
 }