[Gatsby Docs Update] Tutorial: Clicking an anchor tag should auto-close mobile nav (#10844)

* [Gatsby Docs Update] Tutorial: Clicking an anchor tag should auto-close mobile nav

**what is the change?:**
We create a prop to close the mobile nav and then pass it all the way
down through to the links for the tutorial page -
```
<StickyResponsiveSidebar> -> sends down handler to close mobile nav
V
<Sidebar>
V
<Section>
V
<GatsbyLink> -> receives onClick to close mobile nav
```

**why make this change?:**
So that the menu doesn't stay open after people click a link :)

We considered listening to 'onhashchange' and ran into two problems;
- React doesn't support listening to `onhashchange` on DOMComponents,
  and I'm not sure that would work anyway
- When listening to `window.onhashchange` it didn't seem to fire
- Better to pass something down than to add another global event
  listener imo

**test plan:**
Manual testing
AND I ran `yarn build`

**issue:**
Checklist item on this wiki;
https://github.com/bvaughn/react/wiki/Gatsby-check-list
Sidebar Component > Tutorial: Clicking an anchor tag should auto-close mobile nav

* ran prettier

* Fix label on tutorial page

**what is the change?:**
Skim through the items in the 'defaultActiveSection' and find the one
matching the current location hash.

**why make this change?:**
On the tutorial page it feels weird if the navbar section doesn't match
the section you are on.

**test plan:**
Manual testing + `yarn build`

* fix bad resolution of rebase conflict

* ran prettier

* Tutorial links now update active highlight on-click

* Renamed some Section props for clarity

* Refactored createLink() to use named params

Author: bvaughn

www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -22,13 +22,18 @@ class StickyResponsiveSidebar extends Component {
     this.state = {
       open: false,
     };
-    this.toggleOpen = this._toggleOpen.bind(this);
+    this._openNavMenu = this._openNavMenu.bind(this);
+    this._closeNavMenu = this._closeNavMenu.bind(this);
   }
 
-  _toggleOpen() {
+  _openNavMenu() {
     this.setState({open: !this.state.open});
   }
 
+  _closeNavMenu() {
+    this.setState({open: false});
+  }
+
   render() {
     const {open} = this.state;
     const smallScreenSidebarStyles = {
@@ -53,6 +58,7 @@ class StickyResponsiveSidebar extends Component {
     const menuOpacity = open ? 1 : 0;
     const menuOffset = open ? 0 : 40;
 
+    // TODO: role and aria props for 'close' button?
     return (
       <div>
         <div
@@ -123,7 +129,7 @@ class StickyResponsiveSidebar extends Component {
                 tranform: 'none !important',
               },
             }}>
-            <Sidebar {...this.props} />
+            <Sidebar closeParentMenu={this._closeNavMenu} {...this.props} />
           </div>
         </div>
         <div
@@ -141,7 +147,7 @@ class StickyResponsiveSidebar extends Component {
             boxShadow: '0 0 20px rgba(0, 0, 0, 0.3)',
             [media.lessThan('small')]: smallScreenBottomBarStyles,
           }}
-          onClick={this.toggleOpen}>
+          onClick={this._openNavMenu}>
           <Container>
             <div
               css={{

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

@@ -17,10 +17,17 @@ import ChevronSvg from '../ChevronSvg';
 // TODO Update isActive link as document scrolls past anchor tags
 // Maybe used 'hashchange' along with 'scroll' to set/update active links
 
-const Section = ({createLink, isActive, location, onClick, section}) => (
+const Section = ({
+  createLink,
+  isActive,
+  location,
+  onLinkClick,
+  onSectionTitleClick,
+  section,
+}) => (
   <div>
     <MetaTitle
-      onClick={onClick}
+      onClick={onSectionTitleClick}
       cssProps={{
         marginTop: 10,
 
@@ -59,13 +66,23 @@ const Section = ({createLink, isActive, location, onClick, section}) => (
           css={{
             marginTop: 5,
           }}>
-          {createLink(location, section, item)}
+          {createLink({
+            item,
+            location,
+            onLinkClick,
+            section,
+          })}
 
           {item.subitems &&
             <ul css={{marginLeft: 20}}>
               {item.subitems.map(subitem => (
                 <li key={subitem.id}>
-                  {createLink(location, section, subitem)}
+                  {createLink({
+                    item: subitem,
+                    location,
+                    onLinkClick,
+                    section,
+                  })}
                 </li>
               ))}
             </ul>}

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

@@ -24,7 +24,7 @@ class Sidebar extends Component {
   }
 
   render() {
-    const {createLink, location, sectionList} = this.props;
+    const {closeParentMenu, createLink, location, sectionList} = this.props;
     const {activeSection} = this.state;
 
     return (
@@ -51,7 +51,8 @@ class Sidebar extends Component {
             isActive={activeSection === section || sectionList.length === 1}
             key={index}
             location={location}
-            onClick={() => this._toggleSection(section)}
+            onLinkClick={closeParentMenu}
+            onSectionTitleClick={() => this._toggleSection(section)}
             section={section}
           />
         ))}

www/src/templates/tutorial.js

@@ -15,15 +15,26 @@ import React from 'react';
 import {createLinkTutorial} from 'utils/createLink';
 import {sectionListTutorial} from 'utils/sectionList';
 
-const Tutorial = ({data, location}) => (
-  <MarkdownPage
-    createLink={createLinkTutorial}
-    location={location}
-    markdownRemark={data.markdownRemark}
-    sectionList={sectionListTutorial}
-    titlePostfix=" - React"
-  />
-);
+const Tutorial = ({data, location}) => {
+  // HACK The injected location prop doesn't update when hash changes
+  // This might be a gatsby issue, or a react-router/history issue,
+  // Or we might be using either library incorrectly.
+  // For now this patch keeps the hash in sync by JIT copying it from window.
+  // The undefined check prevents us from breaking on production build.
+  if (typeof window !== 'undefined' && typeof window.location !== 'undefined') {
+    location.hash = window.location.hash;
+  }
+
+  return (
+    <MarkdownPage
+      createLink={createLinkTutorial}
+      location={location}
+      markdownRemark={data.markdownRemark}
+      sectionList={sectionListTutorial}
+      titlePostfix=" - React"
+    />
+  );
+};
 
 Tutorial.propTypes = {
   data: PropTypes.object.isRequired,

www/src/utils/createLink.js

@@ -18,7 +18,7 @@ import isItemActive from 'utils/isItemActive';
 import slugify from 'utils/slugify';
 import {colors, media} from 'theme';
 
-const createLinkBlog = (location, section, item) => {
+const createLinkBlog = ({item, location, section}) => {
   const isActive = isItemActive(location, item);
 
   return (
@@ -29,7 +29,7 @@ const createLinkBlog = (location, section, item) => {
   );
 };
 
-const createLinkCommunity = (location, section, item) => {
+const createLinkCommunity = ({item, location, section}) => {
   if (item.href) {
     return (
       <a css={[linkCss]} href={item.href}>
@@ -45,11 +45,15 @@ const createLinkCommunity = (location, section, item) => {
       </a>
     );
   } else {
-    return createLinkDocs(location, section, item);
+    return createLinkDocs({
+      item,
+      location,
+      section,
+    });
   }
 };
 
-const createLinkDocs = (location, section, item) => {
+const createLinkDocs = ({item, location, section}) => {
   const isActive = isItemActive(location, item);
 
   return (
@@ -62,11 +66,14 @@ const createLinkDocs = (location, section, item) => {
   );
 };
 
-const createLinkTutorial = (location, section, item) => {
+const createLinkTutorial = ({item, location, onLinkClick, section}) => {
   const isActive = isItemActive(location, item);
 
   return (
-    <Link css={[linkCss, isActive && activeLinkCss]} to={item.href}>
+    <Link
+      css={[linkCss, isActive && activeLinkCss]}
+      onClick={onLinkClick}
+      to={item.href}>
       {isActive && <span css={activeLinkBefore} />}
       {item.title}
     </Link>