Move the sidebar to the components dir

GraphQLGuide · Feb 5, 2019 · 78dd936 · 78dd936
1 parent 76777f8
commit 78dd936
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 41 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = ({subtitle, description, basePath}) => ({
   siteMetadata: {
-    title: 'Apollo Documentation',
+    title: 'Apollo Docs',
     subtitle,
     description,
     basePath

diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -0,0 +1,47 @@
+import Header from './header';
+import PropTypes from 'prop-types';
+import React from 'react';
+import colors from '../util/colors';
+import styled from '@emotion/styled';
+import {ReactComponent as LogoSmall} from '../../ui/logo-small.svg';
+
+const Container = styled.aside({
+  flexShrink: 0,
+  width: 305,
+  borderRight: `1px solid ${colors.divider}`,
+  overflowY: 'auto',
+  position: 'relative'
+});
+
+const StyledHeader = styled(Header)({
+  borderBottom: `1px solid ${colors.divider}`,
+  fontSize: 18
+});
+
+const StyledLogoSmall = styled(LogoSmall)({
+  marginRight: 8,
+  height: 36,
+  fill: 'currentColor'
+});
+
+const Content = styled.div({
+  padding: '20px 24px',
+  paddingRight: 0
+});
+
+export default function Sidebar(props) {
+  return (
+    <Container>
+      <StyledHeader>
+        <StyledLogoSmall />
+        {props.title}
+      </StyledHeader>
+      <Content>{props.children}</Content>
+    </Container>
+  );
+}
+
+Sidebar.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired
+};
diff --git a/src/templates/docs/index.js b/src/templates/docs/index.js
@@ -5,42 +5,18 @@ import PageContent from './page-content';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Search from './search';
+import Sidebar from '../../components/sidebar';
 import SidebarNav from './sidebar-nav';
 import VersionSelect from './version-select';
 import colors from '../../util/colors';
 import styled from '@emotion/styled';
-import {ReactComponent as LogoSmall} from '../../../ui/logo-small.svg';
 import {graphql} from 'gatsby';
 
 const Container = styled.div({
   display: 'flex',
   flexGrow: 1
 });
 
-const Sidebar = styled.aside({
-  flexShrink: 0,
-  width: 305,
-  borderRight: `1px solid ${colors.divider}`,
-  overflowY: 'auto',
-  position: 'relative'
-});
-
-const SidebarHeader = styled(Header)({
-  borderBottom: `1px solid ${colors.divider}`,
-  fontSize: 18
-});
-
-const StyledLogoSmall = styled(LogoSmall)({
-  marginRight: 8,
-  height: 36,
-  fill: 'currentColor'
-});
-
-const SidebarContent = styled.div({
-  padding: '20px 24px',
-  paddingRight: 0
-});
-
 const SidebarContentHeader = styled.h4({
   display: 'flex',
   alignItems: 'center',
@@ -110,21 +86,15 @@ export default function Docs(props) {
         <title>{title}</title>
       </Helmet>
       <Container>
-        <Sidebar>
-          <SidebarHeader>
-            <StyledLogoSmall />
-            Apollo Docs
-          </SidebarHeader>
-          <SidebarContent>
-            <SidebarContentHeader>
-              {subtitle}
-              <VersionSelect versions={versions} value={version.basePath} />
-            </SidebarContentHeader>
-            <SidebarNav
-              contents={version.contents}
-              pathname={props.location.pathname}
-            />
-          </SidebarContent>
+        <Sidebar title={title}>
+          <SidebarContentHeader>
+            {subtitle}
+            <VersionSelect versions={versions} value={version.basePath} />
+          </SidebarContentHeader>
+          <SidebarNav
+            contents={version.contents}
+            pathname={props.location.pathname}
+          />
         </Sidebar>
         <Main>
           <Header>