fix(client): do not unmount Guide Layout on navigate

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>;
 };
 

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>;
 };
 

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;
   }
 }
 

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>
   );
 }
 

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>
     );
   }
 }