From 9f8ddb66c584146b1f4021b5fb0757313f549411 Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Fri, 14 Feb 2020 14:35:36 -0800
Subject: [PATCH] refactor(www): Move out pageWithSidebar from layout (#21333)

* Move out pageWithSidebar from layout and into the templates/pages that actually need it.

* update based on recent merges

* doh

* dont generate sidebar if itemlist doenst exist

* fix stuff

* get rid of unneeded import

* remove enableScrollSync prop
---
 www/src/components/layout.js                  |  20 +--
 www/src/components/page-with-sidebar.js       |  63 ++++----
 www/src/pages/features.js                     |  57 +++----
 www/src/pages/features/cms.js                 | 109 +++++++------
 www/src/pages/features/jamstack.js            | 105 ++++++------
 www/src/templates/template-api-markdown.js    |  86 +++++-----
 www/src/templates/template-docs-markdown.js   | 152 +++++++++---------
 .../templates/template-feature-comparison.js  |  75 ++++-----
 8 files changed, 335 insertions(+), 332 deletions(-)

diff --git a/www/src/components/layout.js b/www/src/components/layout.js
index 982dde759e891..2879442ac84b5 100644
--- a/www/src/components/layout.js
+++ b/www/src/components/layout.js
@@ -4,13 +4,11 @@ import React from "react"
 
 import { Global } from "@emotion/core"
 
-import { getItemList } from "../utils/sidebar/item-list"
 import { globalStyles } from "../utils/styles/global"
 import { breakpointGutter } from "../utils/styles"
 import Banner from "../components/banner"
 import Navigation from "../components/navigation"
 import MobileNavigation from "../components/navigation-mobile"
-import PageWithSidebar from "../components/page-with-sidebar"
 import SiteMetadata from "../components/site-metadata"
 import SkipNavLink from "../components/skip-nav-link"
 import "../assets/fonts/futura"
@@ -18,15 +16,7 @@ import { defaultLang } from "../utils/i18n"
 
 export const LocaleContext = React.createContext(defaultLang)
 
-export default function DefaultLayout({
-  location,
-  locale,
-  enableScrollSync,
-  children,
-}) {
-  const itemList = getItemList(location.pathname)
-  const isSidebarDisabled = !itemList
-
+export default function DefaultLayout({ location, locale, children }) {
   return (
     <LocaleContext.Provider value={locale || defaultLang}>
       <Global styles={globalStyles} />
@@ -47,13 +37,7 @@ export default function DefaultLayout({
           },
         }}
       >
-        <PageWithSidebar
-          disable={isSidebarDisabled}
-          itemList={itemList}
-          location={location}
-          enableScrollSync={enableScrollSync}
-          renderContent={() => children}
-        />
+        {children}
       </div>
       <MobileNavigation />
     </LocaleContext.Provider>
diff --git a/www/src/components/page-with-sidebar.js b/www/src/components/page-with-sidebar.js
index d516adaf77721..77c0d7940352c 100644
--- a/www/src/components/page-with-sidebar.js
+++ b/www/src/components/page-with-sidebar.js
@@ -2,38 +2,39 @@
 import { jsx } from "theme-ui"
 import { Fragment } from "react"
 
+import { getItemList } from "../utils/sidebar/item-list"
 import StickyResponsiveSidebar from "./sidebar/sticky-responsive-sidebar"
 
-export default props => {
-  if (props.disable) {
-    return props.renderContent()
-  } else {
-    return (
-      <Fragment>
-        <div
-          sx={{
-            pl: [
-              null,
-              null,
-              null,
-              t => t.sizes.sidebarWidth.default,
-              t => t.sizes.sidebarWidth.large,
-            ],
-          }}
-        >
-          {props.renderContent()}
-        </div>
-        <StickyResponsiveSidebar
-          enableScrollSync={props.enableScrollSync}
-          itemList={props.itemList.items}
-          title={props.itemList.title}
-          sidebarKey={props.itemList.key}
-          disableExpandAll={props.itemList.disableExpandAll}
-          disableAccordions={props.itemList.disableAccordions}
-          key={props.location.pathname}
-          location={props.location}
-        />
-      </Fragment>
-    )
+export default ({ children, enableScrollSync, location }) => {
+  const itemList = getItemList(location.pathname)
+  if (!itemList) {
+    return children
   }
+  return (
+    <Fragment>
+      <div
+        sx={{
+          pl: [
+            null,
+            null,
+            null,
+            t => t.sizes.sidebarWidth.default,
+            t => t.sizes.sidebarWidth.large,
+          ],
+        }}
+      >
+        {children}
+      </div>
+      <StickyResponsiveSidebar
+        enableScrollSync={enableScrollSync}
+        itemList={itemList.items}
+        title={itemList.title}
+        sidebarKey={itemList.key}
+        disableExpandAll={itemList.disableExpandAll}
+        disableAccordions={itemList.disableAccordions}
+        key={location.pathname}
+        location={location}
+      />
+    </Fragment>
+  )
 }
diff --git a/www/src/pages/features.js b/www/src/pages/features.js
index 51738fb7e170d..daad8d9620a3c 100644
--- a/www/src/pages/features.js
+++ b/www/src/pages/features.js
@@ -11,6 +11,7 @@ import FooterLinks from "../components/shared/footer-links"
 import LegendTable from "../components/features/legend-table"
 import FeaturesFooter from "../components/features/features-footer"
 import SimpleEvaluationTable from "../components/features/simple-evaluation-table"
+import PageWithSidebar from "../components/page-with-sidebar"
 
 const FeaturesHeader = () => (
   <section>
@@ -104,34 +105,36 @@ const FeaturesHeader = () => (
 class FeaturesPage extends Component {
   render() {
     return (
-      <Layout location={this.props.location} enableScrollSync={true}>
-        <Helmet>
-          <title>Features</title>
-          <meta
-            name="description"
-            content="Learn how specific features like performance and support for modern technologies make Gatsby worth using."
-          />
-        </Helmet>
-        <Container>
-          <main id={`reach-skip-nav`}>
-            <FeaturesHeader />
-            <SimpleEvaluationTable
-              title="Feature Comparison"
-              headers={[
-                { display: `Category`, nodeFieldProperty: `Category` },
-                { display: `Gatsby`, nodeFieldProperty: `Gatsby` },
-                {
-                  display: `JAMstack frameworks`,
-                  nodeFieldProperty: `Jamstack`,
-                },
-                { display: `Traditional CMS`, nodeFieldProperty: `Cms` },
-              ]}
-              data={this.props.data.allGatsbyFeaturesSpecsCsv.edges}
+      <Layout location={this.props.location}>
+        <PageWithSidebar location={this.props.location}>
+          <Helmet>
+            <title>Features</title>
+            <meta
+              name="description"
+              content="Learn how specific features like performance and support for modern technologies make Gatsby worth using."
             />
-            <FeaturesFooter />
-          </main>
-          <FooterLinks />
-        </Container>
+          </Helmet>
+          <Container>
+            <main id={`reach-skip-nav`}>
+              <FeaturesHeader />
+              <SimpleEvaluationTable
+                title="Feature Comparison"
+                headers={[
+                  { display: `Category`, nodeFieldProperty: `Category` },
+                  { display: `Gatsby`, nodeFieldProperty: `Gatsby` },
+                  {
+                    display: `JAMstack frameworks`,
+                    nodeFieldProperty: `Jamstack`,
+                  },
+                  { display: `Traditional CMS`, nodeFieldProperty: `Cms` },
+                ]}
+                data={this.props.data.allGatsbyFeaturesSpecsCsv.edges}
+              />
+              <FeaturesFooter />
+            </main>
+            <FooterLinks />
+          </Container>
+        </PageWithSidebar>
       </Layout>
     )
   }
diff --git a/www/src/pages/features/cms.js b/www/src/pages/features/cms.js
index 1493150e35fa2..32a8491b39372 100644
--- a/www/src/pages/features/cms.js
+++ b/www/src/pages/features/cms.js
@@ -4,6 +4,7 @@ import { graphql } from "gatsby"
 
 import Button from "../../components/button"
 import Layout from "../../components/layout"
+import PageWithSidebar from "../../components/page-with-sidebar"
 import EvaluationTable from "../../components/features/evaluation-table"
 import { getFeaturesData } from "../../utils/get-csv-features-data"
 import Container from "../../components/container"
@@ -35,60 +36,62 @@ const CmsFeaturesPage = ({ data, location }) => {
   )
 
   return (
-    <Layout location={location} enableScrollSync={true}>
-      <Container>
-        <main id={`reach-skip-nav`}>
-          <Breadcrumb location={location} />
-          <FeaturesHeader />
-          <h3>Comparison</h3>
-          <p>
-            To see a filtered view of Gatsby compared with specific CMS
-            technologies, choose the technologies to compare and then press
-            Compare:
-          </p>
-          <div sx={{ pb: 10 }}>
-            <div
-              sx={{
-                display: `grid`,
-                gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
-                gridAutoRows: `1fr`,
-                gridGap: 2,
-                pb: 4,
-              }}
-            >
-              {featureComparisonOptions.cms.map(
-                ({ key: optionKey, display }) => (
-                  <CompareButton
-                    key={optionKey}
-                    optionKey={optionKey}
-                    selected={selected[optionKey]}
-                    setSelected={setSelected}
-                  >
-                    {display}
-                  </CompareButton>
-                )
-              )}
+    <Layout location={location}>
+      <PageWithSidebar location={location}>
+        <Container>
+          <main id={`reach-skip-nav`}>
+            <Breadcrumb location={location} />
+            <FeaturesHeader />
+            <h3>Comparison</h3>
+            <p>
+              To see a filtered view of Gatsby compared with specific CMS
+              technologies, choose the technologies to compare and then press
+              Compare:
+            </p>
+            <div sx={{ pb: 10 }}>
+              <div
+                sx={{
+                  display: `grid`,
+                  gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
+                  gridAutoRows: `1fr`,
+                  gridGap: 2,
+                  pb: 4,
+                }}
+              >
+                {featureComparisonOptions.cms.map(
+                  ({ key: optionKey, display }) => (
+                    <CompareButton
+                      key={optionKey}
+                      optionKey={optionKey}
+                      selected={selected[optionKey]}
+                      setSelected={setSelected}
+                    >
+                      {display}
+                    </CompareButton>
+                  )
+                )}
+              </div>
+              <Button
+                to={
+                  hasSelected
+                    ? `/features/cms/gatsby-vs-${comparators.join(`-vs-`)}`
+                    : location.pathname
+                }
+              >
+                Compare with Gatsby
+              </Button>
             </div>
-            <Button
-              to={
-                hasSelected
-                  ? `/features/cms/gatsby-vs-${comparators.join(`-vs-`)}`
-                  : location.pathname
-              }
-            >
-              Compare with Gatsby
-            </Button>
-          </div>
-          <LegendTable />
-          <EvaluationTable
-            options={featureComparisonOptions.cms}
-            sections={sections}
-            sectionHeaders={sectionHeaders}
-          />
-          <FeaturesFooter />
-        </main>
-        <FooterLinks />
-      </Container>
+            <LegendTable />
+            <EvaluationTable
+              options={featureComparisonOptions.cms}
+              sections={sections}
+              sectionHeaders={sectionHeaders}
+            />
+            <FeaturesFooter />
+          </main>
+          <FooterLinks />
+        </Container>
+      </PageWithSidebar>
     </Layout>
   )
 }
diff --git a/www/src/pages/features/jamstack.js b/www/src/pages/features/jamstack.js
index 5cd9463d21d65..f64528a9e1891 100644
--- a/www/src/pages/features/jamstack.js
+++ b/www/src/pages/features/jamstack.js
@@ -14,6 +14,7 @@ import CompareButton from "../../components/features/compare-button"
 import Breadcrumb from "../../components/docs-breadcrumb"
 import featureComparisonOptions from "../../data/features/comparison-options.json"
 import useComparisonState from "../../hooks/use-comparison-state"
+import PageWithSidebar from "../../components/page-with-sidebar"
 
 const FeaturesHeader = () => (
   <section>
@@ -38,58 +39,60 @@ const JamstackFeaturesPage = ({ data, location }) => {
   )
 
   return (
-    <Layout location={location} enableScrollSync={true}>
-      <Container>
-        <main id={`reach-skip-nav`}>
-          <Breadcrumb location={location} />
-          <FeaturesHeader />
-          <h3>Comparison</h3>
-          <p>
-            To see a filtered view of Gatsby with specific JAMstack
-            technologies, choose the technologies to compare and then press
-            Compare:
-          </p>
+    <Layout location={location}>
+      <PageWithSidebar location={location}>
+        <Container>
+          <main id={`reach-skip-nav`}>
+            <Breadcrumb location={location} />
+            <FeaturesHeader />
+            <h3>Comparison</h3>
+            <p>
+              To see a filtered view of Gatsby with specific JAMstack
+              technologies, choose the technologies to compare and then press
+              Compare:
+            </p>
 
-          <div
-            sx={{
-              display: `grid`,
-              gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
-              gridAutoRows: `1fr`,
-              gridGap: 2,
-              pb: 4,
-            }}
-          >
-            {featureComparisonOptions.jamstack.map(
-              ({ key: optionKey, display }) => (
-                <CompareButton
-                  key={optionKey}
-                  optionKey={optionKey}
-                  selected={selected[optionKey]}
-                  setSelected={setSelected}
-                >
-                  {display}
-                </CompareButton>
-              )
-            )}
-          </div>
-          <Button
-            to={
-              hasSelected
-                ? `/features/jamstack/gatsby-vs-${comparators.join(`-vs-`)}`
-                : location.pathname
-            }
-          >
-            Compare with Gatsby
-          </Button>
-          <EvaluationTable
-            options={featureComparisonOptions.jamstack}
-            sections={sections}
-            sectionHeaders={sectionHeaders}
-          />
-          <FeaturesFooter />
-        </main>
-        <FooterLinks />
-      </Container>
+            <div
+              sx={{
+                display: `grid`,
+                gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
+                gridAutoRows: `1fr`,
+                gridGap: 2,
+                pb: 4,
+              }}
+            >
+              {featureComparisonOptions.jamstack.map(
+                ({ key: optionKey, display }) => (
+                  <CompareButton
+                    key={optionKey}
+                    optionKey={optionKey}
+                    selected={selected[optionKey]}
+                    setSelected={setSelected}
+                  >
+                    {display}
+                  </CompareButton>
+                )
+              )}
+            </div>
+            <Button
+              to={
+                hasSelected
+                  ? `/features/jamstack/gatsby-vs-${comparators.join(`-vs-`)}`
+                  : location.pathname
+              }
+            >
+              Compare with Gatsby
+            </Button>
+            <EvaluationTable
+              options={featureComparisonOptions.jamstack}
+              sections={sections}
+              sectionHeaders={sectionHeaders}
+            />
+            <FeaturesFooter />
+          </main>
+          <FooterLinks />
+        </Container>
+      </PageWithSidebar>
     </Layout>
   )
 }
diff --git a/www/src/templates/template-api-markdown.js b/www/src/templates/template-api-markdown.js
index a40acc1e32647..837976caf1d8a 100644
--- a/www/src/templates/template-api-markdown.js
+++ b/www/src/templates/template-api-markdown.js
@@ -4,13 +4,13 @@ import React from "react"
 import { Helmet } from "react-helmet"
 import { graphql } from "gatsby"
 import { MDXRenderer } from "gatsby-plugin-mdx"
-import theme from "../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 // API Rendering Stuff
 import { sortBy } from "lodash-es"
 
 import Layout from "../components/layout"
-import { itemListDocs } from "../utils/sidebar/item-list"
+import PageWithSidebar from "../components/page-with-sidebar"
 import MarkdownPageFooter from "../components/markdown-page-footer"
 import DocSearchContent from "../components/docsearch-content"
 import FooterLinks from "../components/shared/footer-links"
@@ -96,45 +96,49 @@ export default function APITemplate({ data, location, pageContext }) {
         <meta name="twitter.label1" content="Reading time" />
         <meta name="twitter:data1" content={`${page.timeToRead} min read`} />
       </Helmet>
-      <Layout location={location} itemList={itemListDocs}>
-        <DocSearchContent>
-          <Container
-            overrideCSS={{
-              pb: 0,
-              [theme.mediaQueries.lg]: {
-                pt: 9,
-              },
-            }}
-          >
-            <Breadcrumb location={location} itemList={itemListDocs} />
-            <h1 id={page.fields.anchor} sx={{ mt: 0 }}>
-              {page.frontmatter.title}
-            </h1>
-          </Container>
-          <Container
-            overrideCSS={{
-              pt: 0,
-              position: `static`,
-              [theme.mediaQueries.lg]: {
-                pb: 9,
-              },
-            }}
-          >
-            <div>
-              <MDXRenderer slug={page.fields.slug}>{page.body}</MDXRenderer>
-              <h2>{page.frontmatter.contentsHeading || "APIs"}</h2>
-              <APIContents docs={mergedFuncs} />
-              <h2>Reference</h2>
-              <APIReference
-                docs={mergedFuncs}
-                showTopLevelSignatures={page.frontmatter.showTopLevelSignatures}
-              />
-              <PrevAndNext sx={{ mt: 9 }} prev={prev} next={next} />
-              <MarkdownPageFooter page={page} />
-            </div>
-          </Container>
-        </DocSearchContent>
-        <FooterLinks />
+      <Layout location={location}>
+        <PageWithSidebar location={location}>
+          <DocSearchContent>
+            <Container
+              overrideCSS={{
+                pb: 0,
+                [mediaQueries.lg]: {
+                  pt: 9,
+                },
+              }}
+            >
+              <Breadcrumb location={location} />
+              <h1 id={page.fields.anchor} sx={{ mt: 0 }}>
+                {page.frontmatter.title}
+              </h1>
+            </Container>
+            <Container
+              overrideCSS={{
+                pt: 0,
+                position: `static`,
+                [mediaQueries.lg]: {
+                  pb: 9,
+                },
+              }}
+            >
+              <div>
+                <MDXRenderer slug={page.fields.slug}>{page.body}</MDXRenderer>
+                <h2>{page.frontmatter.contentsHeading || "APIs"}</h2>
+                <APIContents docs={mergedFuncs} />
+                <h2>Reference</h2>
+                <APIReference
+                  docs={mergedFuncs}
+                  showTopLevelSignatures={
+                    page.frontmatter.showTopLevelSignatures
+                  }
+                />
+                <PrevAndNext sx={{ mt: 9 }} prev={prev} next={next} />
+                <MarkdownPageFooter page={page} />
+              </div>
+            </Container>
+          </DocSearchContent>
+          <FooterLinks />
+        </PageWithSidebar>
       </Layout>
     </React.Fragment>
   )
diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js
index b801825b14a3f..0727ecc6b66fa 100644
--- a/www/src/templates/template-docs-markdown.js
+++ b/www/src/templates/template-docs-markdown.js
@@ -7,6 +7,7 @@ import { MDXRenderer } from "gatsby-plugin-mdx"
 import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 import Layout from "../components/layout"
+import PageWithSidebar from "../components/page-with-sidebar"
 import MarkdownPageFooter from "../components/markdown-page-footer"
 import DocSearchContent from "../components/docsearch-content"
 import TableOfContents from "../components/docs-table-of-contents"
@@ -46,87 +47,88 @@ function DocsTemplate({ data, location, pageContext: { next, prev } }) {
         <meta name="twitter.label1" content="Reading time" />
         <meta name="twitter:data1" content={`${page.timeToRead} min read`} />
       </Helmet>
-      <Layout
-        location={location}
-        locale={page.fields.locale}
-        enableScrollSync={urlSegment === `docs` ? false : true}
-      >
-        <DocSearchContent>
-          <Container
-            overrideCSS={{
-              pb: 0,
-              [mediaQueries.lg]: {
-                pt: 9,
-              },
-              [toc && mediaQueries.xl]: {
-                ...containerStyles,
-              },
-            }}
-          >
-            <Breadcrumb location={location} />
-            <h1 id={page.fields.anchor} sx={{ mt: 0 }}>
-              {page.frontmatter.title}
-            </h1>
-          </Container>
-          <Container
-            overrideCSS={{
-              pt: 0,
-              position: `static`,
-              [mediaQueries.lg]: {
-                pb: 9,
-              },
-              [toc && mediaQueries.xl]: {
-                ...containerStyles,
-                display: `flex`,
-                alignItems: `flex-start`,
-              },
-            }}
-          >
-            {toc && (
+      <Layout location={location} locale={page.fields.locale}>
+        <PageWithSidebar
+          location={location}
+          enableScrollSync={urlSegment === "tutorial"}
+        >
+          <DocSearchContent>
+            <Container
+              overrideCSS={{
+                pb: 0,
+                [mediaQueries.lg]: {
+                  pt: 9,
+                },
+                [toc && mediaQueries.xl]: {
+                  ...containerStyles,
+                },
+              }}
+            >
+              <Breadcrumb location={location} />
+              <h1 id={page.fields.anchor} sx={{ mt: 0 }}>
+                {page.frontmatter.title}
+              </h1>
+            </Container>
+            <Container
+              overrideCSS={{
+                pt: 0,
+                position: `static`,
+                [mediaQueries.lg]: {
+                  pb: 9,
+                },
+                [toc && mediaQueries.xl]: {
+                  ...containerStyles,
+                  display: `flex`,
+                  alignItems: `flex-start`,
+                },
+              }}
+            >
+              {toc && (
+                <div
+                  sx={{
+                    order: 2,
+                    [mediaQueries.xl]: {
+                      ml: 9,
+                      maxWidth: `tocWidth`,
+                      position: `sticky`,
+                      top: t =>
+                        `calc(${t.sizes.headerHeight} + ${t.sizes.bannerHeight} + ${t.space[9]})`,
+                      maxHeight: t =>
+                        `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${t.space[9]} - ${t.space[9]})`,
+                      overflow: `auto`,
+                    },
+                  }}
+                >
+                  <TableOfContents location={location} page={page} />
+                </div>
+              )}
               <div
                 sx={{
-                  order: 2,
-                  [mediaQueries.xl]: {
-                    ml: 9,
-                    maxWidth: `tocWidth`,
-                    position: `sticky`,
-                    top: t =>
-                      `calc(${t.sizes.headerHeight} + ${t.sizes.bannerHeight} + ${t.space[9]})`,
-                    maxHeight: t =>
-                      `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${t.space[9]} - ${t.space[9]})`,
-                    overflow: `auto`,
+                  [page.tableOfContents.items && mediaQueries.xl]: {
+                    maxWidth: `mainContentWidth.withSidebar`,
+                    minWidth: 0,
                   },
                 }}
               >
-                <TableOfContents location={location} page={page} />
-              </div>
-            )}
-            <div
-              sx={{
-                [page.tableOfContents.items && mediaQueries.xl]: {
-                  maxWidth: `mainContentWidth.withSidebar`,
-                  minWidth: 0,
-                },
-              }}
-            >
-              <div>
-                <MDXRenderer slug={page.fields.slug}>{page.body}</MDXRenderer>
-                {page.frontmatter.issue && (
-                  <a
-                    href={page.frontmatter.issue}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    See the issue relating to this stub on GitHub
-                  </a>
-                )}
-                <MarkdownPageFooter page={page} />
-                <PrevAndNext sx={{ mt: 9 }} prev={prev} next={next} />
+                <div>
+                  <MDXRenderer slug={page.fields.slug}>{page.body}</MDXRenderer>
+                  {page.frontmatter.issue && (
+                    <a
+                      href={page.frontmatter.issue}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      See the issue relating to this stub on GitHub
+                    </a>
+                  )}
+                  <MarkdownPageFooter page={page} />
+                  <PrevAndNext sx={{ mt: 9 }} prev={prev} next={next} />
+                </div>
               </div>
-            </div>
-          </Container>
-        </DocSearchContent>
-        <FooterLinks />
+            </Container>
+          </DocSearchContent>
+          <FooterLinks />
+        </PageWithSidebar>
       </Layout>
     </React.Fragment>
   )
diff --git a/www/src/templates/template-feature-comparison.js b/www/src/templates/template-feature-comparison.js
index 8b767b1cde01e..b3c2d619bd99c 100644
--- a/www/src/templates/template-feature-comparison.js
+++ b/www/src/templates/template-feature-comparison.js
@@ -4,6 +4,7 @@ import { Component } from "react"
 import { Helmet } from "react-helmet"
 import { css } from "@emotion/core"
 import Layout from "../components/layout"
+import PageWithSidebar from "../components/page-with-sidebar"
 import FooterLinks from "../components/shared/footer-links"
 import Container from "../components/container"
 import EvaluationTable from "../components/features/evaluation-table"
@@ -33,44 +34,46 @@ class FeatureComparison extends Component {
 
     return (
       <Layout location={location}>
-        <Helmet>
-          <title>{titleString}</title>
-        </Helmet>
-        <Container>
-          <main>
-            <Breadcrumb location={location} />
-            <h1>{titleString}</h1>
-            {options.map(o => (
-              <section key={o.key} sx={{ mb: 6 }}>
-                <h2
-                  css={css`
-                    display: flex;
-                    align-items: center;
-                  `}
-                >
-                  <img
-                    src={LogoDictionary[o.key]}
+        <PageWithSidebar location={location}>
+          <Helmet>
+            <title>{titleString}</title>
+          </Helmet>
+          <Container>
+            <main>
+              <Breadcrumb location={location} />
+              <h1>{titleString}</h1>
+              {options.map(o => (
+                <section key={o.key} sx={{ mb: 6 }}>
+                  <h2
                     css={css`
-                      height: 25px;
-                      margin-bottom: 0;
-                      margin-right: 10px;
+                      display: flex;
+                      align-items: center;
                     `}
-                  />
-                  {o.display}
-                </h2>
-                {o.description}
-              </section>
-            ))}
-            <LegendTable />
-            <EvaluationTable
-              options={options}
-              sections={sections}
-              sectionHeaders={sectionHeaders}
-            />
-          </main>
-          <FeaturesFooter />
-          <FooterLinks />
-        </Container>
+                  >
+                    <img
+                      src={LogoDictionary[o.key]}
+                      css={css`
+                        height: 25px;
+                        margin-bottom: 0;
+                        margin-right: 10px;
+                      `}
+                    />
+                    {o.display}
+                  </h2>
+                  {o.description}
+                </section>
+              ))}
+              <LegendTable />
+              <EvaluationTable
+                options={options}
+                sections={sections}
+                sectionHeaders={sectionHeaders}
+              />
+            </main>
+            <FeaturesFooter />
+            <FooterLinks />
+          </Container>
+        </PageWithSidebar>
       </Layout>
     )
   }