fix: wire menu to redux and add change meanu breakpoint for guide

client/gatsby-browser.js

@@ -41,7 +41,7 @@ export const wrapPageElement = ({ element, props }) => {
   }
   if (/^\/guide(\/.*)*/.test(pathname)) {
     return (
-      <DefaultLayout showMobileSidenav={true}>
+      <DefaultLayout onGuide={true}>
         <GuideLayout>{element}</GuideLayout>
       </DefaultLayout>
     );

client/gatsby-ssr.js

@@ -38,7 +38,7 @@ export const wrapPageElement = ({ element, props }) => {
   }
   if (/^\/guide(\/.*)*/.test(pathname)) {
     return (
-      <DefaultLayout showMobileSidenav={true}>
+      <DefaultLayout onGuide={true}>
         <GuideLayout>{element}</GuideLayout>
       </DefaultLayout>
     );

client/src/components/Header/header.css

@@ -176,6 +176,7 @@ header {
 
 #top-nav .menu-button {
   display: none;
+  color: white;
 }
 
 @media (max-width: 734px) {
@@ -232,3 +233,41 @@ header {
     top: 2.4em;
   }
 }
+
+@media (min-width: 735px) and (max-width: 991px) {
+  .onGuide #top-nav {
+    padding: 0;
+  }
+
+  .onGuide #top-nav .menu-button {
+    display: block;
+    margin: 0 20px 0 12px;
+    padding: 2px 14px;
+    border: 1px solid #fff;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  .onGuide #top-right-nav {
+    top: var(--header-height);
+  }
+
+  .opened #top-nav .menu-button {
+    background: white;
+    color: #006400;
+  }
+
+  .onGuide #top-right-nav {
+    position: absolute;
+    top: -300px;
+    flex-direction: column;
+    width: 100vw;
+    height: min-content;
+    min-height: 160px;
+    padding: 10px 0;
+  }
+
+  .onGuide #top-nav img {
+    margin: 0 0 0 10px;
+  }
+}

client/src/components/Header/index.js

@@ -11,23 +11,28 @@ import { Link } from '../helpers';
 
 import './header.css';
 
-import { toggleDisplaySideNav } from '../layouts/redux';
+import { toggleDisplaySideNav, toggleDisplayMenu } from '../layouts/redux';
+
+const mapStateToProps = state => {
+  return {
+    displayMenu: state.guideNav.displayMenu
+  };
+};
 
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({ toggleDisplaySideNav }, dispatch);
+  bindActionCreators({ toggleDisplaySideNav, toggleDisplayMenu }, dispatch);
 
 const propTypes = {
   disableSettings: PropTypes.bool,
-  showMobileSidenav: PropTypes.bool,
+  displayMenu: PropTypes.bool,
+  onGuide: PropTypes.bool,
+  toggleDisplayMenu: PropTypes.func,
   toggleDisplaySideNav: PropTypes.func
 };
 
 class Header extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      isMenuOpened: false
-    };
     this.menuButtonRef = React.createRef();
   }
 
@@ -39,60 +44,56 @@ class Header extends Component {
     document.removeEventListener('click', this.handleClickOutside);
   }
 
-  toggleClass = () => {
-    if (this.props.showMobileSidenav) {
+  toggleDisplayMenu = () => {
+    if (this.props.onGuide) {
       this.props.toggleDisplaySideNav();
+    } else {
+      this.props.toggleDisplayMenu();
     }
-    this.setState({
-      isMenuOpened: !this.state.isMenuOpened
-    });
   };
 
   handleClickOutside = event => {
     if (
-      this.state.isMenuOpened &&
+      this.props.displayMenu &&
       !this.menuButtonRef.current.contains(event.target) &&
-      !this.props.showMobileSidenav
+      !this.props.onGuide
     ) {
-      this.toggleClass();
+      toggleDisplayMenu();
     }
   };
 
   handleMediaChange = matches => {
-    if (!matches && this.state.isMenuOpened) {
-      this.toggleClass();
+    if (!matches && this.props.displayMenu) {
+      toggleDisplayMenu();
     }
   };
 
-  render() {
-    const { disableSettings, showMobileSidenav } = this.props;
-    if (this.state.isMenuOpened && showMobileSidenav) {
-      return (
-        <header className={this.state.isMenuOpened ? 'opened' : null}>
-          <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>
-      );
+  renderClassNames = (displayMenu, onGuide) => {
+    if (displayMenu && onGuide) {
+      return 'opened onGuide';
+    } else if (displayMenu) {
+      return 'opened';
+    } else if (onGuide) {
+      return 'onGuide';
     }
+    return '';
+  };
+
+  render() {
+    const viewportWidth = Math.max(
+      document.documentElement.clientWidth,
+      window.innerWidth || 0
+    );
+    console.log(viewportWidth);
+    const { disableSettings, onGuide, displayMenu } = this.props;
     return (
-      <header className={this.state.isMenuOpened ? 'opened' : null}>
+      <header className={this.renderClassNames(displayMenu, onGuide)}>
         <nav id='top-nav'>
           <Link className='home-link' to='/'>
             <NavLogo />
           </Link>
           {disableSettings ? null : <FCCSearch />}
+          {onGuide && displayMenu && viewportWidth < 991 ? null : (
             <ul id='top-right-nav'>
               <li>
                 <Link to='/learn'>Learn</Link>
@@ -111,9 +112,10 @@ class Header extends Component {
                 <UserState disableSettings={disableSettings} />
               </li>
             </ul>
+          )}
           <span
             className='menu-button'
-            onClick={this.toggleClass}
+            onClick={this.toggleDisplayMenu}
             ref={this.menuButtonRef}
           >
             Menu
@@ -128,6 +130,6 @@ class Header extends Component {
 Header.propTypes = propTypes;
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps
 )(Header);

client/src/components/layouts/Default.js

@@ -72,7 +72,7 @@ const propTypes = {
   onlineStatusChange: PropTypes.func.isRequired,
   removeFlashMessage: PropTypes.func.isRequired,
   showFooter: PropTypes.bool,
-  showMobileSidenav: PropTypes.bool
+  onGuide: PropTypes.bool
 };
 
 const mapStateToProps = createSelector(
@@ -141,7 +141,7 @@ class DefaultLayout extends Component {
       removeFlashMessage,
       landingPage,
       showFooter = true,
-      showMobileSidenav = false,
+      onGuide = false,
       isOnline,
       isSignedIn
     } = this.props;
@@ -162,7 +162,7 @@ class DefaultLayout extends Component {
         </Helmet>
         <Header
           disableSettings={disableSettings}
-          showMobileSidenav={showMobileSidenav}
+          onGuide={onGuide}
         />
         <div className={`default-layout ${landingPage ? 'landing-page' : ''}`}>
           <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />

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

@@ -6,13 +6,18 @@ export const ns = 'guideNav';
 
 const initialState = {
   displaySideNav: false,
+  displayMenu: false,
   expandedState: {}
 };
 
-const types = createTypes(['toggleExpandedState', 'toggleDisplaySideNav'], ns);
+const types = createTypes(
+  ['toggleExpandedState', 'toggleDisplaySideNav', 'toggleDisplayMenu'],
+  ns
+);
 
 export const toggleExpandedState = createAction(types.toggleExpandedState);
 export const toggleDisplaySideNav = createAction(types.toggleDisplaySideNav);
+export const toggleDisplayMenu = createAction(types.toggleDisplayMenu);
 
 export const reducer = handleActions(
   {
@@ -25,7 +30,12 @@ export const reducer = handleActions(
     }),
     [types.toggleDisplaySideNav]: state => ({
       ...state,
+      displayMenu: !state.displayMenu,
       displaySideNav: !state.displaySideNav
+    }),
+    [types.toggleDisplayMenu]: state => ({
+      ...state,
+      displayMenu: !state.displayMenu
     })
   },
   initialState