Make two layouts: one main and one for docs. Use these layouts in Gat…

…sby's API to not make full rerender of page on navigation. It fixes transition in doc's sidebar
iterative · Mar 17, 2020 · d22140b · d22140b
1 parent d03beca
commit d22140b
Show file tree

Hide file tree

Showing 18 changed files with 321 additions and 272 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -0,0 +1,5 @@
+/* eslint-env node */
+
+const PageWrapper = require('./src/components/PageWrapper').default
+
+exports.wrapPageElement = PageWrapper
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -0,0 +1,5 @@
+/* eslint-env node */
+
+const PageWrapper = require('./src/components/PageWrapper').default
+
+exports.wrapPageElement = PageWrapper
diff --git a/src/components/404/index.js b/src/components/404/index.js
@@ -1,20 +1,19 @@
 import React from 'react'
-import Page from '../Page'
 import Subscribe from '../Subscribe'
 
 import { Wrapper, Title, Content } from './styles'
 
 function Page404() {
   return (
-    <Page stickHeader={true}>
+    <>
       <Wrapper>
         <Title>Not Found</Title>
         <Content>
           You just hit a route that doesn&#39;t exist... the sadness.
         </Content>
       </Wrapper>
       <Subscribe />
-    </Page>
+    </>
   )
 }
 

diff --git a/src/components/Community/index.js b/src/components/Community/index.js
@@ -1,6 +1,5 @@
 import React from 'react'
 
-import Page from '../Page'
 import Subscribe from '../Subscribe'
 
 import CommunityContribute from './Contribute'
@@ -19,7 +18,7 @@ const themes = {
 
 export default function Community() {
   return (
-    <Page stickHeader={true}>
+    <>
       <PageWrapper>
         <CommunityHero />
         <CommunityMeet theme={themes.purple} />
@@ -28,6 +27,6 @@ export default function Community() {
         <CommunityEvents theme={themes.purple} />
         <Subscribe />
       </PageWrapper>
-    </Page>
+    </>
   )
 }
diff --git a/...onents/Documentation/SidebarMenu/index.js → ...components/DocLayout/SidebarMenu/index.js b/...onents/Documentation/SidebarMenu/index.js → ...components/DocLayout/SidebarMenu/index.js
diff --git a/...nents/Documentation/SidebarMenu/styles.js → ...omponents/DocLayout/SidebarMenu/styles.js b/...nents/Documentation/SidebarMenu/styles.js → ...omponents/DocLayout/SidebarMenu/styles.js
diff --git a/src/components/DocLayout/index.js b/src/components/DocLayout/index.js
@@ -0,0 +1,77 @@
+/* global docsearch:readonly */
+
+import React, { useCallback, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import Hamburger from '../Hamburger'
+import SearchForm from '../SearchForm'
+import MainLayout from '../MainLayout'
+import SidebarMenu from './SidebarMenu'
+
+import { Container, Backdrop, SearchArea, Side, SideToggle } from './styles'
+
+import { structure } from '../../utils/sidebar'
+
+const SIDEBAR_MENU = 'sidebar-menu'
+
+function DocLayout({ children, ...restProps }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isSearchAvaible, setIsSearchAvaible] = useState(false)
+
+  const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen])
+
+  useEffect(() => {
+    try {
+      docsearch
+
+      setIsSearchAvaible(true)
+
+      if (docsearch && isSearchAvaible) {
+        docsearch({
+          apiKey: '755929839e113a981f481601c4f52082',
+          indexName: 'dvc',
+          inputSelector: '#doc-search',
+          debug: false // Set to `true` if you want to inspect the dropdown
+        })
+      }
+    } catch (ReferenceError) {
+      // nothing there
+    }
+  }, [isSearchAvaible])
+
+  return (
+    <MainLayout {...restProps} isDocPage>
+      <Container>
+        <Backdrop onClick={toggleMenu} visible={isMenuOpen} />
+
+        <SideToggle onClick={toggleMenu} isMenuOpen={isMenuOpen}>
+          <Hamburger />
+        </SideToggle>
+
+        <Side isOpen={isMenuOpen}>
+          {isSearchAvaible && (
+            <SearchArea>
+              <SearchForm />
+            </SearchArea>
+          )}
+
+          <SidebarMenu
+            sidebar={structure}
+            currentPath={restProps.location.pathname}
+            id={SIDEBAR_MENU}
+            onClick={toggleMenu}
+          />
+        </Side>
+        {children}
+      </Container>
+    </MainLayout>
+  )
+}
+
+DocLayout.propTypes = {
+  children: PropTypes.element.isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired
+  })
+}
+
+export default DocLayout
diff --git a/src/components/DocLayout/styles.js b/src/components/DocLayout/styles.js
@@ -0,0 +1,128 @@
+import styled from 'styled-components'
+
+import { media } from '../../styles'
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  max-width: 1200px;
+  margin: 0 auto;
+  background: white;
+  z-index: 2;
+
+  &:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 50%;
+    background-color: #eef4f8;
+    z-index: -1;
+    pointer-events: none;
+  }
+`
+
+export const Backdrop = styled.div`
+  display: none;
+
+  ${media.phablet`
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .3s linear;
+
+    ${props =>
+      props.visible &&
+      `
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba(0, 0, 0, 0.4);
+      z-index: 1;
+      opacity: 1;
+      pointer-events: all;
+    `}
+  `};
+`
+
+export const Side = styled.div`
+  width: 280px;
+  background-color: #eef4f8;
+
+  @media only screen and (max-width: 1200px) {
+    padding-left: 15px;
+  }
+
+  ${media.phablet`
+    position: fixed;
+    display: block;
+    z-index: 2;
+    top: 78px;
+    bottom: 0;
+    left: 0;
+    right: 60px;
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 4px, rgba(0, 0, 0, 0.28) 0px 4px 8px;
+    transform: translateX(-110%);
+    transition: transform .35s ease;
+
+    ${props =>
+      props.isOpen &&
+      `
+      transform: translateX(0);
+    `}
+  `};
+`
+
+export const SearchArea = styled.div`
+  height: 60px;
+  display: flex;
+  align-items: center;
+  background-color: #eef4f8;
+  z-index: 10;
+  position: sticky;
+  top: 0;
+
+  ${media.phablet`
+    position: relative;
+    padding: 0 20px;
+  `};
+
+  form {
+    height: 40px;
+  }
+`
+
+export const SideToggle = styled.div`
+  display: none;
+  position: fixed;
+  z-index: 2;
+  left: 8px;
+  bottom: 20px;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0px 9px 0 rgba(0, 0, 0, 0.15);
+  transition: transform 0.3s ease;
+  justify-content: center;
+  align-items: center;
+
+  ${media.phablet`
+    display: flex;
+
+    > div {
+      transform: scale(0.75);
+    }
+  `};
+
+  ${({ isMenuOpen }) =>
+    isMenuOpen &&
+    `
+    transform: translateX(calc(100vw - 60px));
+  `};
+`
diff --git a/src/components/Documentation/index.js b/src/components/Documentation/index.js
@@ -1,87 +1,30 @@
-/* global docsearch:readonly */
-
-import React, { useCallback, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
-import Page from '../Page'
-import Hamburger from '../Hamburger'
-import SearchForm from '../SearchForm'
-import SidebarMenu from './SidebarMenu'
 import Markdown from './Markdown'
 import RightPanel from './RightPanel'
 
-import { structure, getItemByPath } from '../../utils/sidebar'
-
-import { Backdrop, Container, SearchArea, Side, SideToggle } from './styles'
-
-const SIDEBAR_MENU = 'sidebar-menu'
+import { getItemByPath } from '../../utils/sidebar'
 
 export default function Documentation({ htmlAst, path, headings }) {
   const { source, prev, next, tutorials } = getItemByPath(path)
-
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [isSearchAvaible, setIsSearchAvaible] = useState(false)
-
-  const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen])
-
-  useEffect(() => {
-    try {
-      docsearch
-
-      setIsSearchAvaible(true)
-
-      if (isSearchAvaible) {
-        docsearch({
-          apiKey: '755929839e113a981f481601c4f52082',
-          indexName: 'dvc',
-          inputSelector: '#doc-search',
-          debug: false // Set to `true` if you want to inspect the dropdown
-        })
-      }
-    } catch (ReferenceError) {
-      // nothing there
-    }
-  }, [isSearchAvaible])
-
   const githubLink = `https://github.com/iterative/dvc.org/blob/master/сontent${source}`
 
   return (
-    <Page stickHeader={true} isDocPage={true}>
-      <Container>
-        <Backdrop onClick={toggleMenu} visible={isMenuOpen} />
-
-        <SideToggle onClick={toggleMenu} isMenuOpen={isMenuOpen}>
-          <Hamburger />
-        </SideToggle>
-
-        <Side isOpen={isMenuOpen}>
-          {isSearchAvaible && (
-            <SearchArea>
-              <SearchForm />
-            </SearchArea>
-          )}
-
-          <SidebarMenu
-            sidebar={structure}
-            currentPath={path}
-            id={SIDEBAR_MENU}
-            onClick={toggleMenu}
-          />
-        </Side>
-        <Markdown
-          htmlAst={htmlAst}
-          prev={prev}
-          next={next}
-          githubLink={githubLink}
-          tutorials={tutorials}
-        />
-        <RightPanel
-          headings={headings}
-          githubLink={githubLink}
-          tutorials={tutorials}
-        />
-      </Container>
-    </Page>
+    <>
+      <Markdown
+        htmlAst={htmlAst}
+        prev={prev}
+        next={next}
+        githubLink={githubLink}
+        tutorials={tutorials}
+      />
+      <RightPanel
+        headings={headings}
+        githubLink={githubLink}
+        tutorials={tutorials}
+      />
+    </>
   )
 }