bg(mobile-nav): fix mobile not displaying properly (#20)

- switch over to using reactjs to implement mobile nav toggling [Fixes #163724488]
akhilome · Feb 5, 2019 · 511e47e · 511e47e
1 parent 0658982
commit 511e47e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 27 deletions.
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
@@ -1,11 +1,16 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import LogoutLink from './Logout';
 
-export const Nav = ({ isLoggedIn, role, cartItemsCount }) => {
-  const navContent = () => {
+export class Nav extends Component {
+  state = { showMobileMenu: false };
+
+  toggleMobileMenu = () => this.setState(prev => ({ showMobileMenu: !prev.showMobileMenu }));
+
+  navContent = () => {
+    const { isLoggedIn, role, cartItemsCount } = this.props;
     if (isLoggedIn && role === 'customer') {
       return (
         <Fragment>
@@ -56,22 +61,30 @@ Cart [
       </Fragment>
     );
   };
-  return (
-    <header>
-      <div className="site-title">
-        <h2>
-          <Link to="/">Kiakia Food</Link>
-        </h2>
-      </div>
-      <nav>
-        <button type="button" className="nav-mobile small transparent">
-          ☰ menu
-        </button>
-        <ul>{navContent()}</ul>
-      </nav>
-    </header>
-  );
-};
+
+  render() {
+    const { showMobileMenu } = this.state;
+    return (
+      <header>
+        <div className="site-title">
+          <h2>
+            <Link to="/">Kiakia Food</Link>
+          </h2>
+        </div>
+        <nav>
+          <button
+            type="button"
+            onClick={this.toggleMobileMenu}
+            className="nav-mobile small transparent"
+          >
+            ☰ menu
+          </button>
+          <ul className={showMobileMenu ? 'open' : null}>{this.navContent()}</ul>
+        </nav>
+      </header>
+    );
+  }
+}
 
 Nav.propTypes = {
   isLoggedIn: PropTypes.bool,

diff --git a/src/index.html b/src/index.html
@@ -12,11 +12,5 @@
   </head>
   <body>
     <div id="app"></div>
-    <script>
-      setTimeout(() => {
-        document.querySelector('.nav-mobile').onclick = () =>
-          document.querySelector('nav ul').classList.toggle('open');
-      }, 500);
-    </script>
   </body>
 </html>
diff --git a/src/tests/components/__snapshots__/App.test.jsx.snap b/src/tests/components/__snapshots__/App.test.jsx.snap
@@ -81,11 +81,14 @@ exports[`App component should render app correctly 1`] = `
               <nav>
                 <button
                   className="nav-mobile small transparent"
+                  onClick={[Function]}
                   type="button"
                 >
                   ☰ menu
                 </button>
-                <ul>
+                <ul
+                  className={null}
+                >
                   <li>
                     <Link
                       replace={false}
@@ -295,11 +298,14 @@ exports[`App component should render app correctly for authenticated customers 1
               <nav>
                 <button
                   className="nav-mobile small transparent"
+                  onClick={[Function]}
                   type="button"
                 >
                   ☰ menu
                 </button>
-                <ul>
+                <ul
+                  className={null}
+                >
                   <li>
                     <Link
                       replace={false}