[Gatsby Docs Update] Initial version of new sidebar

www/src/components/MarkdownPage/MarkdownPage.js

@@ -18,7 +18,7 @@ import NavigationFooter from 'templates/components/NavigationFooter';
 import {StickyContainer} from 'react-sticky';
 import PropTypes from 'prop-types';
 import React from 'react';
-import StickySidebar from 'components/StickySidebar';
+import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
@@ -99,7 +99,7 @@ const MarkdownPage = ({
                 flex: '0 0 200px',
                 marginLeft: 'calc(9% + 40px)',
               }}>
-              <StickySidebar
+              <StickyResponsiveSidebar
                 defaultActiveSection={
                   location != null
                     ? findSectionForPath(location.pathname, sectionList)

www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -0,0 +1,149 @@
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+*/
+
+'use strict';
+
+import Container from 'components/Container';
+import {Component, React} from 'react';
+import isItemActive from 'utils/isItemActive';
+import {Sticky} from 'react-sticky';
+import Sidebar from 'templates/components/Sidebar';
+import {colors, media} from 'theme';
+
+// TODO: memoize to save doing O(n) on the active section items + subitems every
+// time.
+function findActiveItemTitle(location, defaultActiveSection) {
+  const {items} = defaultActiveSection;
+  for (let i = 0, len = items.length; i < len; i++) {
+    const item = items[i];
+    if (isItemActive(location, item)) {
+      return item.title;
+    } else if (item.subitems && item.subitems.length) {
+      const {subitems} = item;
+      for (let j = 0, len2 = subitems.length; j < len2; j++) {
+        const subitem = subitems[j];
+        if (isItemActive(location, subitem)) {
+          return subitem.title;
+        }
+      }
+    }
+  }
+  // If nothing else is found, warn and default to section title
+  console.warn('No active item title found in <StickyResponsiveSidebar>');
+  return defaultActiveSection.title;
+}
+
+class StickyResponsiveSidebar extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      activeSection: props.defaultActiveSection,
+      open: false,
+    };
+    this.toggleOpen = this._toggleOpen.bind(this);
+  }
+
+  _toggleOpen() {
+    this.setState({open: !this.state.open});
+  }
+
+  render() {
+    const {defaultActiveSection, location} = this.props;
+    console.log('the defaultActiveSection is ;', defaultActiveSection);
+    console.log('this.props are ', this.props);
+    const smallScreenSidebarStyles = {
+      // TODO: animate height instead of using display: none?
+      // Changing height may be better a11y too
+      display: this.state.open ? 'block' : 'none',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      position: 'fixed',
+      backgroundColor: colors.white,
+    };
+
+    const smallScreenBottomBarStyles = {
+      display: 'block',
+    };
+
+    const bottomBarText = this.state.open
+      ? 'Close'
+      : findActiveItemTitle(location, defaultActiveSection);
+
+    return (
+      <div>
+        <Sticky>
+          {({style}) => {
+            return (
+              <div
+                css={{
+                  [media.lessThan('small')]: smallScreenSidebarStyles,
+                  [media.greaterThan('small')]: style,
+                }}>
+                <div
+                  css={{
+                    marginTop: 60,
+
+                    [media.lessThan('small')]: {
+                      marginTop: 40,
+                    },
+
+                    [media.between('medium', 'large')]: {
+                      marginTop: 50,
+                    },
+                  }}>
+                  <Sidebar {...this.props} />
+                </div>
+              </div>
+            );
+          }}
+        </Sticky>
+        <div
+          css={{
+            backgroundColor: colors.darker,
+            bottom: 0,
+            color: colors.brand,
+            display: 'none', // gets overriden at small screen sizes
+            left: 0,
+            cursor: 'pointer',
+            position: 'fixed',
+            right: 0,
+            width: '100%',
+            zIndex: 1,
+            [media.lessThan('small')]: smallScreenBottomBarStyles,
+          }}
+          onClick={this.toggleOpen}>
+          <Container>
+            <div
+              css={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                height: 60,
+                [media.between('medium', 'large')]: {
+                  height: 50,
+                },
+                [media.lessThan('small')]: {
+                  height: 40,
+                },
+              }}>
+              {bottomBarText}
+            </div>
+          </Container>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StickyResponsiveSidebar;

www/src/components/StickySidebar/index.js → www/src/components/StickyResponsiveSidebar/index.js

@@ -11,6 +11,6 @@
 
 'use strict';
 
-import StickySidebar from './StickySidebar';
+import StickyResponsiveSidebar from './StickyResponsiveSidebar';
 
-export default StickySidebar;
+export default StickyResponsiveSidebar;

www/src/pages/docs/error-decoder.html.js

@@ -18,7 +18,7 @@ import hex2rgba from 'hex2rgba';
 import MarkdownHeader from 'components/MarkdownHeader';
 import React from 'react';
 import {StickyContainer} from 'react-sticky';
-import StickySidebar from 'components/StickySidebar';
+import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import {colors, sharedStyles} from 'theme';
 import findSectionForPath from 'utils/findSectionForPath';
 
@@ -81,7 +81,7 @@ const ErrorPage = ({data, location}) => (
             flex: '0 0 200px',
             marginLeft: 'calc(9% + 40px)',
           }}>
-          <StickySidebar
+          <StickyResponsiveSidebar
             defaultActiveSection={
               location != null
                 ? findSectionForPath(location.pathname, sectionList)

www/src/templates/components/Sidebar/Section.js

@@ -11,36 +11,16 @@
 
 'use strict';
 
+import isItemActive from 'utils/isItemActive';
 import Link from 'gatsby-link';
 import React from 'react';
 import slugify from 'utils/slugify';
 import {colors} from 'theme';
 import MetaTitle from '../MetaTitle';
 
-const toAnchor = (href = '') => {
-  const index = href.indexOf('#');
-  return index >= 0 ? href.substr(index) : '';
-};
-
 // TODO Update isActive link as document scrolls past anchor tags
 // Maybe used 'hashchange' along with 'scroll' to set/update active links
 
-// TODO Account for redirect_from URLs somehow; they currently won't match.
-
-const isItemActive = (location, item) => {
-  if (location == null) {
-    return false; // Production build of Gatsby is eval'ed in Node
-  } else if (location.hash) {
-    if (item.href) {
-      return location.hash === toAnchor(item.href);
-    }
-  } else if (item.id.includes('html')) {
-    return location.pathname.includes(item.id);
-  } else {
-    return location.pathname.includes(slugify(item.id));
-  }
-};
-
 const Section = ({isActive, location, onClick, section}) => (
   <div>
     <MetaTitle

www/src/templates/installation.js

@@ -18,7 +18,7 @@ import NavigationFooter from 'templates/components/NavigationFooter';
 import {StickyContainer} from 'react-sticky';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import StickySidebar from 'components/StickySidebar';
+import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import findSectionForPath from 'utils/findSectionForPath';
 import {sharedStyles} from 'theme';
@@ -184,7 +184,7 @@ class InstallationPage extends Component {
                   flex: '0 0 200px',
                   marginLeft: 'calc(9% + 40px)',
                 }}>
-                <StickySidebar
+                <StickyResponsiveSidebar
                   defaultActiveSection={
                     location != null
                       ? findSectionForPath(location.pathname, sectionList)

www/src/theme.js

@@ -69,7 +69,7 @@ const media = {
   },
 
   lessThan(key: Size) {
-    return `@media (max-width: ${SIZES[key].max}px)`;
+    return `@media (max-width: ${SIZES[key].min}px)`;
   },
 
   size(key: Size) {

www/src/utils/isItemActive.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+*/
+
+'use strict';
+
+import slugify from 'utils/slugify';
+
+const toAnchor = (href = '') => {
+  const index = href.indexOf('#');
+  return index >= 0 ? href.substr(index) : '';
+};
+
+// TODO Account for redirect_from URLs somehow; they currently won't match.
+
+const isItemActive = (location, item) => {
+  if (location == null) {
+    return false; // Production build of Gatsby is eval'ed in Node
+  } else if (location.hash) {
+    if (item.href) {
+      return location.hash === toAnchor(item.href);
+    }
+  } else if (item.id.includes('html')) {
+    return location.pathname.includes(item.id);
+  } else {
+    return location.pathname.includes(slugify(item.id));
+  }
+};
+
+export default isItemActive;