Merge 7751df7 into 7312ba0

andela · Oct 26, 2019 · 96a9398 · 96a9398
2 parents 7312ba0 + 7751df7
commit 96a9398
Show file tree

Hide file tree

Showing 22 changed files with 760 additions and 409 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/__mocks__/windowEvent.js b/src/__mocks__/windowEvent.js
@@ -0,0 +1,11 @@
+const map = {};
+window.document.addEventListener = jest.fn((event, callback) => {
+  map[event] = callback;
+});
+window.addEventListener = jest.fn((event, callback) => {
+  map[event] = callback;
+});
+
+const event = jest.fn(e => map[e.name](e));
+export const document = { event };
+export default { ...document, document };
diff --git a/src/app/App.js b/src/app/App.js
@@ -4,6 +4,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import './App.scss';
+import Nav from './routes/NavBar';
 import GetAllArticles from '../feature/articles/getArticles/GetAllArticlesComponent';
 import CreateArticle from '../feature/articles/createArticle/CreateArticleComponent';
 import ProtectedRoutes from '../feature/protectedRoutes/ProtectedRoutesComponent';
@@ -20,22 +21,25 @@ function App() {
   return (
     <div className="App">
       <BrowserRouter>
-        {/* <Nav /> */}
+        <header className="App-header">
+          <Nav />
+        </header>
         <ToastContainer />
         <Switch>
-          <Route path="/forgot" component={ForgotPassword} />
-          <Route
-            path="/users/reset-password/:token"
-            component={ResetPassword}
-          />
-          <Route exact path="/" component={GetAllArticles} />
-          <Route path="/login" component={Login} />
-          <Route path="/signup" component={SignUp} />
-          <Route path="/profile" component={Profile} />
-          <Route path="/update-profile" component={UpdateProfile} />
-          <Route path="/Signup" component={SignUp} />
-          <Route path="/articles/:slug" component={SingleArticle} />
-          <ProtectedRoutes path="/Create" component={CreateArticle} />
+          <section className="App-body">
+            <Route path="/forgot" component={ForgotPassword} />
+            <Route
+              path="/users/reset-password/:token"
+              component={ResetPassword}
+            />
+            <Route exact path="/" component={GetAllArticles} />
+            <Route path="/login" component={Login} />
+            <Route path="/signup" component={SignUp} />
+            <Route path="/profile" component={Profile} />
+            <Route path="/update-profile" component={UpdateProfile} />
+            <Route path="/articles/:slug" component={SingleArticle} />
+            <ProtectedRoutes path="/create" component={CreateArticle} />
+          </section>
         </Switch>
       </BrowserRouter>
     </div>

diff --git a/src/app/App.scss b/src/app/App.scss
@@ -9,29 +9,132 @@ body {
   .App {
     .App-header {
       background-color: #282c34;
-      height: 6.2rem;
+      height: 5.5rem !important;
       font-size: 25px;
       color: white;
+      position: fixed;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+    }
+    .App-body {
+      margin-top: 130px;
     }
   }
 
   .nav-wrapper {
-    .App-logo {
+    display: flex;
+
+    > div {
+      width: 50%;
+    }
+
+    .logo-container {
+      margin-left: 50px;
+    }
+    .logo {
+      text-decoration: none;
+      color: white;
       height: 5rem;
-      margin: 10px 10px 10px 50px;
+      margin: 30px 10px 10px 0px;
       float: left;
     }
 
     .right {
-      float: right;
+      margin-right: 50px;
     }
 
-    .last {
-      margin-right: 50px;
+    .dropdown {
+      position: relative;
+    }
+    .dropdown-content {
+      color: black;
+      position: absolute;
+      background-color: white;
+      border: 1px solid black;
+      z-index: 1;
+      right: 0px;
+      min-width: 180px;
+
+      ul {
+        display: block;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+
+        a {
+          text-decoration: none;
+          color: black;
+          width: 100%;
+          padding: 0;
+
+          li {
+            text-transform: capitalize;
+            border: 1px solid #ddd;
+            background-color: white;
+            font-size: 1rem;
+            padding: 0px 12px;
+          }
+          li:hover {
+            background: #e0e0de;
+          }
+        }
+
+        .user-name {
+          text-transform: none;
+          font-size: 1rem;
+          padding: 0px 12px;
+        }
+      }
+    }
+    .nav-user-image {
+      margin-left: 20px;
+    }
+
+    .notification-dropdown {
+      position: relative;
+    }
+
+    .notification-content {
+      color: black;
+      position: absolute;
+      background-color: white;
+      border: 1px solid black;
+      z-index: 1;
+      right: 0px;
+      min-width: 300px;
+
+      ul {
+        display: block;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+
+        a {
+          text-decoration: none;
+          color: black;
+          width: 100%;
+          padding: 0;
+
+          li {
+            text-transform: none;
+            border: 1px solid #ddd;
+            background-color: white;
+            font-size: 0.8rem;
+            padding: 0px 12px;
+            line-height: 30px;
+          }
+          li:hover {
+            background: #e0e0de;
+          }
+        }
+      }
     }
 
     ul {
-      display: flex;
+      float: right;
 
       li {
         list-style-type: none;
@@ -47,10 +150,32 @@ body {
         }
 
         a:hover {
-          background: #fff;
-          color: #282c34;
+          background: none !important;
+          color: #2b9ff2 !important;
+          cursor: pointer;
+        }
+        img {
+          background: white;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
           cursor: pointer;
         }
+        .notification-counter {
+          font-size: 15px;
+          background: red;
+          position: absolute;
+          top: -10px;
+          right: -10px;
+          height: 25px;
+          width: 25px;
+        }
+      }
+      .notification-container {
+        position: relative;
+        display: inline-block;
+        text-align: center;
+        line-height: 27px;
       }
     }
   }
@@ -61,63 +186,77 @@ body {
     text-align: center;
   }
 }
-@media (min-width: 320px) and (max-width: 480px) {
-  body {
-    background: #fff;
-    font-family: ‘Open Sans’, sans-serif;
-    letter-spacing: 1px;
-    .App {
-      .App-header {
-        background-color: #282c34;
-        height: 6.2rem;
-        font-size: 25px;
-        color: white;
-      }
+@media (max-width: 700px) {
+  .nav-wrapper {
+    font-size: 20px !important;
+
+    .logo-container {
+      width: 35%;
+      font-size: 20px !important;
+      margin-left: 10px !important;
     }
-    .nav-wrapper {
-      .App-logo {
-        height: 5rem;
-        margin: 10px 10px 10px 50px;
-        float: left;
-      }
-      .right {
-        float: right;
+
+    .logo {
+      margin: 35px 0px 10px 0px !important;
+    }
+
+    .right {
+      width: 65%;
+      margin-right: 10px !important;
+    }
+
+    ul {
+      li {
+        a {
+          font-size: 0.7em !important;
+          padding: 5px 10px 5px 10px !important;
+        }
       }
-      .last {
-        margin-right: 50px;
+    }
+  }
+}
+@media (max-width: 550px) {
+  .App-body {
+    margin-top: 95px !important;
+  }
+  .nav-wrapper {
+    .logo-container {
+      font-size: 15px !important;
+    }
+    .logo {
+      margin: 10px 0px 10px 0px;
+    }
+    .right {
+      margin-right: 10px !important;
+    }
+  }
+}
+@media (max-width: 400px) {
+  .nav-wrapper {
+    .logo-container {
+      font-size: 9px !important;
+    }
+    .logo {
+      margin: 40px 0px 10px 0px !important;
+    }
+    ul {
+      li {
+        a {
+          font-size: 0.5em !important;
+          padding: 5px 10px 5px 10px !important;
+        }
       }
+    }
+    .notification-content {
+      right: -10px !important;
+      min-width: 250px !important;
       ul {
-        display: flex;
-        li {
-          list-style-type: none;
-          text-transform: uppercase;
-          line-height: 45px;
-          a {
-            color: #fff;
-            text-decoration: none;
-            padding: 15px 20px 15px 20px;
-            font-size: 1.2rem;
-            font-weight: bolder;
-          }
-          a:hover {
-            background: #fff;
-            color: #282c34;
-            cursor: pointer;
+        a {
+          li {
+            font-size: 0.5em !important;
           }
         }
       }
     }
-    .intro {
-      margin-top: 20%;
-      font-size: 1.5rem;
-      font-weight: bold;
-      text-align: center;
-    }
-    .App-logo {
-      display: none;
-    }
-    .last {
-      margin-right: 15px !important;
-    }
   }
 }
diff --git a/src/app/common/images/notification.png b/src/app/common/images/notification.png
diff --git a/src/app/routes/MenuDropDown.js b/src/app/routes/MenuDropDown.js
@@ -0,0 +1,36 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable import/no-named-as-default */
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import Logout from '../../feature/auth/logout/Logout';
+
+const MenuDropDown = (props) => {
+  const { user: { userName } } = props;
+  return (
+    <div className="dropdown-menu">
+      <ul>
+        <li className="user-name">
+          {`@${userName}`}
+        </li>
+        <a href="/profile">
+          <li>
+          Profile
+          </li>
+        </a>
+        <a href="/Create">
+          <li>
+            Create article
+          </li>
+        </a>
+        <a href="/Create">
+          <li>
+            Bookmarks
+          </li>
+        </a>
+        <Logout />
+      </ul>
+    </div>
+  );
+};
+
+export default MenuDropDown;