Responsive navigation menu and loader HOC

package.json

@@ -12,6 +12,8 @@
     "prop-types": "^15.5.10",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
+    "react-hamburger-menu": "^1.2.1",
+    "react-loader-spinner": "^3.1.14",
     "react-redux": "^5.0.7",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",

src/components/ArticleList.js

@@ -1,12 +1,12 @@
+import React from 'react';
 import ArticlePreview from './ArticlePreview';
 import ListPagination from './ListPagination';
-import React from 'react';
+import WithLoader from "./hoc/withLoader";
+
 
 const ArticleList = props => {
   if (!props.articles) {
-    return (
-      <div className="article-preview">Loading...</div>
-    );
+    return <div />;
   }
 
   if (props.articles.length === 0) {
@@ -35,4 +35,4 @@ const ArticleList = props => {
   );
 };
 
-export default ArticleList;
+export default WithLoader(ArticleList);

src/components/Header.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import HamburgerMenu from 'react-hamburger-menu';
+import '../main.css';
 
 const LoggedOutView = props => {
   if (!props.currentUser) {
@@ -70,18 +72,44 @@ const LoggedInView = props => {
 };
 
 class Header extends React.Component {
+  state = {
+      open: false,
+  }
+
+  handleClick() {
+    this.setState({
+      open: !this.state.open,
+    });
+  }
+
   render() {
+    const {open} = this.state;
+    const customNavAdditionalClass = open ? '' : 'd-none';
+
     return (
       <nav className="navbar navbar-light">
-        <div className="container">
+        <div className="container top-menu">
+          <HamburgerMenu
+            isOpen={this.state.open}
+            menuClicked={this.handleClick.bind(this)}
+            width={30}
+            height={18}
+            strokeWidth={1}
+            rotate={0}
+            color='black'
+            borderRadius={0}
+            animationDuration={0.5}
+            className="hamburger-menu"
+          />
 
           <Link to="/" className="navbar-brand">
             {this.props.appName.toLowerCase()}
           </Link>
 
-          <LoggedOutView currentUser={this.props.currentUser} />
-
-          <LoggedInView currentUser={this.props.currentUser} />
+          <div className={`custom-nav ${customNavAdditionalClass}`}>
+              <LoggedOutView currentUser={this.props.currentUser} />
+             <LoggedInView currentUser={this.props.currentUser} />
+          </div>
         </div>
       </nav>
     );

src/components/Home/MainView.js

@@ -3,6 +3,7 @@ import React from 'react';
 import agent from '../../agent';
 import { connect } from 'react-redux';
 import { CHANGE_TAB } from '../../constants/actionTypes';
+import LoadingContext from "../../context/loadingContext";
 
 const YourFeedTab = props => {
   if (props.token) {
@@ -83,12 +84,16 @@ const MainView = props => {
         </ul>
       </div>
 
-      <ArticleList
-        pager={props.pager}
-        articles={props.articles}
-        loading={props.loading}
-        articlesCount={props.articlesCount}
-        currentPage={props.currentPage} />
+      <LoadingContext.Provider value={{
+          loading: !Boolean(props.articles)
+      }}>
+        <ArticleList
+          pager={props.pager}
+          articles={props.articles}
+          loading={props.loading}
+          articlesCount={props.articlesCount}
+          currentPage={props.currentPage} />
+      </LoadingContext.Provider>
     </div>
   );
 };

src/components/hoc/withLoader.js

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import Loader from "react-loader-spinner"
+import LoadingContext from "../../context/loadingContext";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
+
+const WithLoader = (WrappedComponent) => {
+    return (props) => {
+        const { loading } = useContext(LoadingContext);
+
+        if (loading) {
+            return <Loader
+                type="ThreeDots"
+                color="#5cb85c"
+                height={50}
+                width={50}
+            />;
+        }
+
+        return <WrappedComponent {...props} loading={loading} />;
+    }
+};
+
+export default WithLoader;

src/context/loadingContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const LoadingContext = React.createContext();
+LoadingContext.displayName = 'LoadingContext';
+
+export default LoadingContext;

src/main.css

@@ -0,0 +1,55 @@
+.top-menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+}
+
+.d-none {
+    display: none;
+}
+
+@media (max-width: 767px){
+    .hamburger-menu {
+        display: block;
+    }
+
+    .custom-nav {
+        position: absolute;
+        top: 100%;
+        left: 1%;
+        width: 98%;
+        background: #f8f9fa;
+        z-index: 2;
+    }
+
+    .custom-nav ul {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .custom-nav ul li {
+        text-align: center;
+        width: 100%;
+        margin: 0 !important;
+        border-bottom: 1px solid #cfcdcd;
+        z-index: 2;
+    }
+
+    .custom-nav ul li:hover {
+        background: #ebebeb;
+        border-left: 2px solid #5cb85c;
+    }
+}
+
+@media (min-width: 768px){
+    .hamburger-menu {
+        display: none;
+    }
+
+    .custom-nav {
+        display: block;
+    }
+}