Added notification link in dropdown

components/NavBar/index.js

@@ -7,6 +7,8 @@ import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
 const NavBar = ({ personData: { photo } }) => {
   const RDSLogo = '/assets/Real-Dev-Squad1x.png';
   const [toggle, setToggle] = useState(false);
+  const [count, setCount] = useState(15);
+
   const navbarRef = useRef();
   GenericClosePopUp(navbarRef, () => {
     setToggle(false);
@@ -51,11 +53,11 @@ const NavBar = ({ personData: { photo } }) => {
             toggle ? styles.dropdownContent : styles.dropdownContentHide
           }
         >
-          <a href="#">Link 1</a>
-          <a href="#">Link 2</a>
-          <a href="#">Link 3</a>
-          <a href="#">Link 4</a>
-          <a href="#">Link 5</a>
+          <a href="">Profile</a>
+          <a href="/notification">Notifications <span className={styles.notificationNumbers}>{count}</span></a>
+          <a href="#">Setting</a>
+          <a href="#">Orders</a>
+          <a href="#">Log Out</a>      
         </div>
       </div>
     </nav>

components/NavBar/navbar.module.css

@@ -54,17 +54,25 @@
 }
 .dropdownContent a {
   color: black;
-  padding: 5px 0;
+  padding: 5px 4px;
   text-decoration: none;
   text-align: center;
-  font-size: 18px;
+  font-size: 14px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.26);
   display: block;
 }
 .dropdownContent a:hover {
   background-color: #e4e2e2
 }
-
+.notificationNumbers{
+  background-color: #041484;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  padding: .3em;
+  font-size: .8em;
+  text-align: center;
+}
 
 @media (max-width: 540px) {
   .navBar li {

mock/notifications.json

@@ -0,0 +1,20 @@
+[
+  {
+    "notification": "Rohit has requested RDS 200 from you"
+  },
+  {
+    "notification": "Rohit has requested RDS 200 from you"
+  },
+  {
+    "notification": "Rohit has requested RDS 200 from you"
+  },
+  {
+    "notification": "Rohit has requested RDS 200 from you"
+  },
+  {
+    "notification": "Rohit has requested RDS 200 from you"
+  },
+  {
+    "notification": "Rohit has requested RDS 200 from you"
+  }
+]

pages/notification.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import personData from '../mock/person.json';
+import NavBar from '@components/NavBar';
+import data from '../mock/notifications.json';
+
+export default function notification() {
+  return (
+    <div className="container">
+      <NavBar personData={personData} />
+      <div className="notification">
+        <ul>
+          {
+            data.map((item, index) =>            
+                <li key={index}>
+                  <div className="notificationArea">
+                    <h4>{item.notification}</h4>
+                    <div className="buttons">
+                      <button className="approve">Approve</button>
+                      <button className="discard">Discard</button>
+                    </div>
+                  </div>
+                </li>
+            )
+          }
+        </ul>
+      </div>
+      <style jsx>
+        {`
+          .notification {
+            margin: auto;
+            padding: 0;
+            width: 50%;
+            min-height: auto;
+            border: 0.15em solid rgba(128, 128, 128, 0.5);
+          }
+          .notification ul {
+            margin: 0;
+            padding: 0;
+          }
+          .notification ul li {
+            list-style-type: none;
+            border-bottom: 0.1em solid rgba(128, 128, 128, 0.137);
+            padding: 5px;
+          }
+          .notification ul li:hover {
+            background-color: rgba(214, 212, 212, 0.308);
+          }
+          .notificationArea h4 {
+            margin: 0;
+            padding: 10px;
+          }
+          .buttons {
+            margin-left: 0.5em;
+          }
+          .approve {
+            background-color: #2ecc71;
+            text-align: center;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            padding: 0.5em;
+            border-radius: 0.3em;
+            font-weight: 600;
+          }
+          .discard {
+            background-color: #ff3838;
+            text-align: center;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            padding: 0.5em;
+            border-radius: 0.3em;
+            font-weight: 600;
+            margin-left: 0.5em;
+          }
+          @media only screen and (max-width: 600px) {
+            .notification {
+              width: 80%;
+              margin-top: 3em;
+            }
+          }
+        `}
+      </style>
+    </div>
+  );
+}