fix: update main layout to use new layout components

newrelic · Dec 3, 2020 · c01aef8 · c01aef8
1 parent 9b5d843
commit c01aef8
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 172 deletions.
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
@@ -4,68 +4,31 @@ import { css } from '@emotion/core';
 import {
   CookieConsentDialog,
   GlobalHeader,
-  GlobalFooter,
+  Layout,
+  Logo,
+  SearchInput,
+  useLayout,
 } from '@newrelic/gatsby-theme-newrelic';
-import { graphql, useStaticQuery } from 'gatsby';
 import MobileHeader from '../components/MobileHeader';
-import Sidebar from '../components/Sidebar';
+import { Link } from 'gatsby';
+import Navigation from '../components/Navigation';
 import '../components/styles.scss';
-import usePageContext from '../hooks/usePageContext';
 import { useLocation } from '@reach/router';
-import { useMeasure } from 'react-use';
-
-const MainLayout = ({ children }) => {
-  const {
-    site: { layout, siteMetadata },
-  } = useStaticQuery(graphql`
-    query {
-      site {
-        layout {
-          contentPadding
-          maxWidth
-        }
-        siteMetadata {
-          repository
-        }
-      }
-    }
-  `);
 
+const MainLayout = ({ children, pageContext }) => {
+  const { contentPadding, maxWidth } = useLayout();
   const location = useLocation();
-  const { fileRelativePath } = usePageContext();
-  const [headerRef, { height }] = useMeasure();
+  const [searchTerm, setSearchTerm] = useState('');
+  const { fileRelativePath } = pageContext;
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
-  const isComponentDoc = fileRelativePath.includes(
-    'src/markdown-pages/components'
-  );
-  const editUrl = isComponentDoc
-    ? null
-    : `${siteMetadata.repository}/blob/main/${fileRelativePath}`;
 
   useEffect(() => {
     setIsMobileNavOpen(false);
   }, [location.pathname]);
 
   return (
-    <div
-      css={css`
-        --sidebar-width: 300px;
-
-        min-height: 100vh;
-        display: grid;
-        grid-template-rows: auto 1fr;
-      `}
-    >
-      <div
-        ref={headerRef}
-        css={css`
-          position: sticky;
-          z-index: 99;
-          top: 0;
-        `}
-      >
-        <GlobalHeader editUrl={editUrl} />
-      </div>
+    <>
+      <GlobalHeader />
       <MobileHeader
         css={css`
           @media (min-width: 761px) {
@@ -75,70 +38,60 @@ const MainLayout = ({ children }) => {
         isOpen={isMobileNavOpen}
         toggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
       />
-      <div
+      <Layout
         css={css`
-          --global-header-height: ${height}px;
-
           display: ${isMobileNavOpen ? 'none' : 'grid'};
-          grid-template-areas:
-            'sidebar content'
-            'sidebar footer';
-          grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
-          grid-template-rows: 1fr auto;
-          grid-gap: ${layout.contentPadding};
-          width: 100%;
-          max-width: ${layout.maxWidth};
-          margin: 0 auto;
-
-          @media screen and (max-width: 760px) {
-            grid-template-columns: minmax(0, 1fr);
-          }
         `}
       >
-        <Sidebar
-          css={css`
-            position: fixed;
-            top: var(--global-header-height);
-            width: var(--sidebar-width);
-            height: calc(100vh - var(--global-header-height));
-            overflow: auto;
+        <Layout.Sidebar>
+          <div
+            css={css`
+              background: var(--primary-background-color);
+              position: sticky;
+              top: -2rem;
+              z-index: 10;
+              margin: -2rem -0.5rem 1rem;
+              padding: 1rem 0.5rem;
+            `}
+          >
+            <Link
+              css={css`
+                display: block;
+                margin-bottom: 1rem;
+              `}
+              to="/"
+            >
+              <Logo
+                css={css`
+                  display: block;
+                  width: 150px;
 
-            @media (max-width: 760px) {
-              display: none;
-            }
-          `}
-        />
-        <div
-          css={css`
-            grid-area: sidebar;
-          `}
-        />
-        <article
-          data-swiftype-name="body"
-          data-swiftype-type="text"
-          css={css`
-            grid-area: content;
-            padding-top: ${layout.contentPadding};
-            padding-right: ${layout.contentPadding};
-          `}
-        >
-          {children}
-        </article>
-        <GlobalFooter
-          fileRelativePath={fileRelativePath}
-          css={css`
-            grid-area: footer;
-            margin-left: -${layout.contentPadding};
-          `}
-        />
-      </div>
+                  @media screen and (max-width: 760px) {
+                    width: 160px;
+                  }
+                `}
+              />
+            </Link>
+            <SearchInput
+              placeholder="Filter navigation"
+              onClear={() => setSearchTerm('')}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              value={searchTerm}
+            />
+          </div>
+          <Navigation searchTerm={searchTerm} />
+        </Layout.Sidebar>
+        <Layout.Main>{children}</Layout.Main>
+        <Layout.Footer fileRelativePath={fileRelativePath} />
+      </Layout>
       <CookieConsentDialog />
-    </div>
+    </>
   );
 };
 
 MainLayout.propTypes = {
   children: PropTypes.node.isRequired,
+  pageContext: PropTypes.object.isRequired,
 };
 
 export default MainLayout;
diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -6,7 +6,7 @@ const Layout = ({ children, pageContext }) => {
   if (pageContext.fileRelativePath.match(/404/)) {
     return children;
   }
-  return <MainLayout>{children}</MainLayout>;
+  return <MainLayout pageContext={pageContext}>{children}</MainLayout>;
 };
 
 Layout.propTypes = {