Merge branch 'feature/menu_expand_collapse_on_mobile'

app/.eslintignore

@@ -0,0 +1,6 @@
+node_modules/
+build
+test/fixtures
+test/tests
+razzle.config.js
+packages/create-razzle-app/templates

app/.eslintrc

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "node": true,
+    "es6": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "no-console": "off",
+    "strict": ["error", "global"],
+    "curly": "warn"
+  },
+  "plugins": [
+    "react"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

app/package.json

@@ -11,29 +11,31 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.15",
-    "@fortawesome/free-solid-svg-icons": "^5.7.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.18",
+    "@fortawesome/free-solid-svg-icons": "^5.8.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@mapbox/sphericalmercator": "^1.1.0",
-    "body-parser": "^1.18.3",
+    "body-parser": "^1.19.0",
     "bootstrap": "^4.3.1",
     "connect-pg-simple": "^5.0.0",
-    "express": "^4.16.4",
-    "express-session": "^1.15.6",
-    "leaflet": "^1.4.0",
+    "express": "^4.17.1",
+    "express-session": "^1.16.1",
+    "leaflet": "^1.5.1",
     "mapnik": "^4.2.1",
     "node-fs": "^0.1.7",
-    "pg-promise": "^8.5.6",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "pg-promise": "^8.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-leaflet": "^1.0.1",
     "react-leaflet-universal": "^1.2.0",
     "react-router-dom": "^4.3.1",
-    "serialize-javascript": "^1.6.1",
+    "serialize-javascript": "^1.7.0",
     "sharp": "^0.21.3"
   },
   "devDependencies": {
-    "razzle": "^2.4.1",
-    "babel-eslint": "^10.0.1"
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-react": "^7.13.0",
+    "razzle": "^3.0.0"
   }
 }

app/src/frontend/header.js

@@ -5,12 +5,33 @@ import Logo from './logo';
 import './header.css';
 
 /**
- * Main Header
+ * Render the main header using a responsive design
  */
-const Header = (props) => (
+class Header extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {collapseMenu: true};
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.setState(state => ({
+      collapseMenu: !state.collapseMenu
+    }));
+  }
+
+  render() {
+   return (
      <header className="main-header">
        <nav className="navbar navbar-light navbar-expand-md">
+         <span className="navbar-brand">
            <Logo/>
+         </span>
+        <button className="navbar-toggler navbar-toggler-right" type="button"
+          onClick={this.handleClick}   aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
           <ul className="navbar-nav ml-auto">
             <li className="nav-item">
               <a className="nav-link" href="https://pages.colouring.london">Hello</a>
@@ -34,10 +55,12 @@ const Header = (props) => (
               <a className="nav-link" href="https://discuss.colouring.london">Discuss</a>
             </li>
             {
-                    props.user?
+              this.props.user?
               (
                 <li className="nav-item">
-                        <NavLink to="/my-account.html" className="nav-link">My account (Logged in as {props.user.username})</NavLink>
+                  <NavLink to="/my-account.html" className="nav-link">
+                    My account (Logged in as {this.props.user.username})
+                  </NavLink>
                 </li>
               ):
               (
@@ -52,8 +75,11 @@ const Header = (props) => (
               )
             }
             </ul>
+          </div>
         </nav>
       </header>
     );
+  }
+}
 
 export default Header;