fix: custom menu for guide

client/gatsby-browser.js

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 
 import { createStore } from './src/redux/createStore';
 import AppMountNotifier from './src/components/AppMountNotifier';
-import GuideNavContextProvider from './src/contexts/GuideNavigationContext';
+
 import {
   CertificationLayout,
   DefaultLayout,
@@ -16,9 +16,7 @@ const store = createStore();
 export const wrapRootElement = ({ element }) => {
   return (
     <Provider store={store}>
-      <GuideNavContextProvider>
+      <AppMountNotifier render={() => element} />
-        <AppMountNotifier render={() => element} />
-      </GuideNavContextProvider>
     </Provider>
   );
 };
@@ -43,7 +41,7 @@ export const wrapPageElement = ({ element, props }) => {
   }
   if (/^\/guide(\/.*)*/.test(pathname)) {
     return (
-      <DefaultLayout>
+      <DefaultLayout showMobileSidenav={true}>
         <GuideLayout>{element}</GuideLayout>
       </DefaultLayout>
     );

client/gatsby-ssr.js

@@ -6,7 +6,6 @@ import { Provider } from 'react-redux';
 import headComponents from './src/head';
 import { createStore } from './src/redux/createStore';
 
-import GuideNavContextProvider from './src/contexts/GuideNavigationContext';
 import {
   CertificationLayout,
   DefaultLayout,
@@ -16,11 +15,7 @@ import {
 const store = createStore();
 
 export const wrapRootElement = ({ element }) => {
-  return (
+  return <Provider store={store}>{element}</Provider>;
-    <Provider store={store}>
-      <GuideNavContextProvider>{element}</GuideNavContextProvider>
-    </Provider>
-  );
 };
 
 wrapRootElement.propTypes = {
@@ -43,7 +38,7 @@ export const wrapPageElement = ({ element, props }) => {
   }
   if (/^\/guide(\/.*)*/.test(pathname)) {
     return (
-      <DefaultLayout>
+      <DefaultLayout showMobileSidenav={true}>
         <GuideLayout>{element}</GuideLayout>
       </DefaultLayout>
     );

client/src/components/Header/index.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import Media from 'react-media';
 import FCCSearch from 'react-freecodecamp-search';
 
@@ -9,6 +11,17 @@ import { Link } from '../helpers';
 
 import './header.css';
 
+import { toggleDisplaySideNav } from '../layouts/redux';
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ toggleDisplaySideNav }, dispatch);
+
+const propTypes = {
+  disableSettings: PropTypes.bool,
+  showMobileSidenav: PropTypes.bool,
+  toggleDisplaySideNav: PropTypes.func
+};
+
 class Header extends Component {
   constructor(props) {
     super(props);
@@ -27,6 +40,9 @@ class Header extends Component {
   }
 
   toggleClass = () => {
+    if (this.props.showMobileSidenav) {
+      this.props.toggleDisplaySideNav();
+    }
     this.setState({
       isMenuOpened: !this.state.isMenuOpened
     });
@@ -35,7 +51,8 @@ class Header extends Component {
   handleClickOutside = event => {
     if (
       this.state.isMenuOpened &&
-      !this.menuButtonRef.current.contains(event.target)
+      !this.menuButtonRef.current.contains(event.target) &&
+      !this.props.showMobileSidenav
     ) {
       this.toggleClass();
     }
@@ -48,7 +65,27 @@ class Header extends Component {
   };
 
   render() {
-    const { disableSettings } = this.props;
+    const { disableSettings, showMobileSidenav } = this.props;
+    if (this.state.isMenuOpened && showMobileSidenav) {
+      return (
+        <header>
+          <nav id='top-nav'>
+            <Link className='home-link' to='/'>
+              <NavLogo />
+            </Link>
+            {disableSettings ? null : <FCCSearch />}
+
+            <span
+              className='menu-button'
+              onClick={this.toggleClass}
+              ref={this.menuButtonRef}
+            >
+              Menu
+            </span>
+          </nav>
+        </header>
+      );
+    }
     return (
       <header className={this.state.isMenuOpened ? 'opened' : null}>
         <nav id='top-nav'>
@@ -88,7 +125,9 @@ class Header extends Component {
   }
 }
 
-Header.propTypes = {
+Header.propTypes = propTypes;
-  disableSettings: PropTypes.bool
+
-};
+export default connect(
-export default Header;
+  null,
+  mapDispatchToProps
+)(Header);

client/src/components/layouts/Default.js

@@ -71,7 +71,8 @@ const propTypes = {
   landingPage: PropTypes.bool,
   onlineStatusChange: PropTypes.func.isRequired,
   removeFlashMessage: PropTypes.func.isRequired,
-  showFooter: PropTypes.bool
+  showFooter: PropTypes.bool,
+  showMobileSidenav: PropTypes.bool
 };
 
 const mapStateToProps = createSelector(
@@ -140,6 +141,7 @@ class DefaultLayout extends Component {
       removeFlashMessage,
       landingPage,
       showFooter = true,
+      showMobileSidenav = false,
       isOnline,
       isSignedIn
     } = this.props;
@@ -158,7 +160,10 @@ class DefaultLayout extends Component {
         >
           <style>{fontawesome.dom.css()}</style>
         </Helmet>
-        <Header disableSettings={disableSettings} />
+        <Header
+          disableSettings={disableSettings}
+          showMobileSidenav={showMobileSidenav}
+        />
         <div className={`default-layout ${landingPage ? 'landing-page' : ''}`}>
           <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
           {hasMessages ? (

client/src/components/layouts/Guide.js

@@ -1,15 +1,21 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { StaticQuery, graphql } from 'gatsby';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+// import { createSelector } from 'reselect';
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 
-import { NavigationContext } from '../../contexts/GuideNavigationContext';
 import SideNav from './components/guide/SideNav';
 import Spacer from '../helpers/Spacer';
 
 import 'prismjs/themes/prism.css';
 import './guide.css';
 
+// import { expandedState, displaySideNav } from '../../redux';
+
+import { toggleExpandedState, toggleDisplaySideNav } from './redux';
+
 const propTypes = {
   children: PropTypes.any,
   data: PropTypes.shape({
@@ -26,9 +32,23 @@ const propTypes = {
       )
     })
   }),
-  location: PropTypes.object
+  displaySideNav: PropTypes.bool,
+  expandedState: PropTypes.object,
+  location: PropTypes.object,
+  toggleDisplaySideNav: PropTypes.func,
+  toggleExpandedState: PropTypes.func
 };
 
+const mapStateToProps = state => {
+  return {
+    expandedState: state.guideNav.expandedState,
+    displaySideNav: state.guideNav.displaySideNav
+  };
+};
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ toggleExpandedState, toggleDisplaySideNav }, dispatch);
+
 class GuideLayout extends React.Component {
   getContentRef = ref => (this.contentRef = ref);
 
@@ -38,6 +58,12 @@ class GuideLayout extends React.Component {
   };
 
   render() {
+    let {
+      displaySideNav,
+      expandedState,
+      toggleExpandedState,
+      toggleDisplaySideNav
+    } = this.props;
     return (
       <StaticQuery
         query={graphql`
@@ -60,49 +86,40 @@ class GuideLayout extends React.Component {
           const { edges } = data.allNavigationNode;
           const pages = edges.map(edge => edge.node);
           return (
-            <NavigationContext>
+            <Fragment>
-              {({
+              <Spacer size={1} />
-                toggleDisplaySideNav,
+              <Grid className='guide-container'>
-                displaySideNav,
+                <Row>
-                expandedState,
+                  <Col
-                toggleExpandedState
+                    md={4}
-              }) => (
+                    smHidden={!displaySideNav}
-                <Fragment>
+                    xsHidden={!displaySideNav}
-                  <Spacer size={1} />
+                  >
-                  <Grid className='guide-container'>
+                    <SideNav
-                    <Row>
+                      expandedState={expandedState}
-                      <Col
+                      onNavigate={this.handleNavigation}
-                        md={4}
+                      pages={pages}
-                        smHidden={!displaySideNav}
+                      toggleDisplaySideNav={toggleDisplaySideNav}
-                        xsHidden={!displaySideNav}
+                      toggleExpandedState={toggleExpandedState}
-                      >
+                    />
-                        <SideNav
+                  </Col>
-                          expandedState={expandedState}
+                  <Col
-                          onNavigate={this.handleNavigation}
+                    md={8}
-                          pages={pages}
+                    smHidden={displaySideNav}
-                          toggleDisplaySideNav={toggleDisplaySideNav}
+                    xsHidden={displaySideNav}
-                          toggleExpandedState={toggleExpandedState}
+                  >
-                        />
+                    <main
-                      </Col>
+                      className='content'
-                      <Col
+                      id='main'
-                        md={8}
+                      ref={this.getContentRef}
-                        smHidden={displaySideNav}
+                      tabIndex='-1'
-                        xsHidden={displaySideNav}
+                    >
-                      >
+                      {this.props.children}
-                        <main
+                    </main>
-                          className='content'
+                  </Col>
-                          id='main'
+                </Row>
-                          ref={this.getContentRef}
+              </Grid>
-                          tabIndex='-1'
+            </Fragment>
-                        >
-                          {this.props.children}
-                        </main>
-                      </Col>
-                    </Row>
-                  </Grid>
-                </Fragment>
-              )}
-            </NavigationContext>
           );
         }}
       />
@@ -113,4 +130,7 @@ class GuideLayout extends React.Component {
 GuideLayout.displayName = 'GuideLayout';
 GuideLayout.propTypes = propTypes;
 
-export default GuideLayout;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(GuideLayout);

client/src/components/layouts/components/guide/SideNav.js

@@ -27,6 +27,30 @@ class SideNav extends Component {
     this.renderParent = this.renderParent.bind(this);
   }
 
+  componentDidMount() {
+    if (typeof window !== 'undefined') {
+      const pathMap = window.location.pathname
+        .slice(1)
+        .split('/')
+        .slice(0, -1)
+        .reduce((map, current, i, pathArray) => {
+          const path =
+            i !== 0 ? map[pathArray[i - 1]] + `/${current}` : `/${current}`;
+          return {
+            ...map,
+            [current]: path
+          };
+        }, {});
+
+      return Object.keys(pathMap)
+        .map(key => pathMap[key])
+        .forEach(path => {
+          this.props.toggleExpandedState(path);
+        });
+    }
+    return null;
+  }
+
   renderPanels(parents, pages) {
     if (!parents) {
       return 'No Parents Here';

client/src/components/layouts/redux/index.js

@@ -0,0 +1,32 @@
+import { createAction, handleActions } from 'redux-actions';
+
+import { createTypes } from '../../../utils/createTypes';
+
+export const ns = 'guideNav';
+
+const initialState = {
+  displaySideNav: false,
+  expandedState: {}
+};
+
+const types = createTypes(['toggleExpandedState', 'toggleDisplaySideNav'], ns);
+
+export const toggleExpandedState = createAction(types.toggleExpandedState);
+export const toggleDisplaySideNav = createAction(types.toggleDisplaySideNav);
+
+export const reducer = handleActions(
+  {
+    [types.toggleExpandedState]: (state, { payload }) => ({
+      ...state,
+      expandedState: {
+        ...state.expandedState,
+        [payload]: !state.expandedState[payload]
+      }
+    }),
+    [types.toggleDisplaySideNav]: state => ({
+      ...state,
+      displaySideNav: !state.displaySideNav
+    })
+  },
+  initialState
+);

client/src/redux/rootReducer.js

@@ -6,6 +6,10 @@ import {
   reducer as flash,
   ns as flashNameSpace
 } from '../components/Flash/redux';
+import {
+  reducer as guideNav,
+  ns as guideNavNameSpace
+} from '../components/layouts/redux';
 import { reducer as settings, ns as settingsNameSpace } from './settings';
 import {
   reducer as curriculumMap,
@@ -21,6 +25,7 @@ export default combineReducers({
   [challengeNameSpace]: challenge,
   [curriculumMapNameSpace]: curriculumMap,
   [flashNameSpace]: flash,
+  [guideNavNameSpace]: guideNav,
   form: formReducer,
   [settingsNameSpace]: settings
 });