From 5b9d24e9d2a67a8bb47ec186639571676d3cc5a2 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Thu, 11 Mar 2021 17:42:18 +0530
Subject: [PATCH 1/8] Added notification link in dropdown

---
 components/NavBar/index.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/NavBar/index.js b/components/NavBar/index.js
index 7761e1b..51b8619 100644
--- a/components/NavBar/index.js
+++ b/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>

From 033f144b8da1f7611178037256e0fb223c7e6972 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Thu, 11 Mar 2021 17:44:31 +0530
Subject: [PATCH 2/8] css for notification

---
 components/NavBar/navbar.module.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/NavBar/navbar.module.css b/components/NavBar/navbar.module.css
index e4f1198..4132e06 100644
--- a/components/NavBar/navbar.module.css
+++ b/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 {

From 68060f97797bee2e8077c70e12d0dbad507b3488 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Thu, 11 Mar 2021 17:46:04 +0530
Subject: [PATCH 3/8] Added notification page

---
 pages/notification.js | 126 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 pages/notification.js

diff --git a/pages/notification.js b/pages/notification.js
new file mode 100644
index 0000000..8eed27a
--- /dev/null
+++ b/pages/notification.js
@@ -0,0 +1,126 @@
+import React from 'react';
+import personData from '../mock/person.json';
+import NavBar from '@components/NavBar';
+
+export default function notification() {
+  return (
+    <div className="container">
+      <NavBar personData={personData} />
+      <div className="notification">
+        <ul>
+          <li>
+            <div className="notificationArea">
+              <h4>Rohit has requested RDS 200 from you</h4>
+              <div className="buttons">
+                <button className="approve">Approve</button>
+                <button className="discard">Discard</button>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div className="notificationArea">
+              <h4>Rohit has requested RDS 200 from you</h4>
+              <div className="buttons">
+                <button className="approve">Approve</button>
+                <button className="discard">Discard</button>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div className="notificationArea">
+              <h4>Rohit has requested RDS 200 from you</h4>
+              <div className="buttons">
+                <button className="approve">Approve</button>
+                <button className="discard">Discard</button>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div className="notificationArea">
+              <h4>Rohit has requested RDS 200 from you</h4>
+              <div className="buttons">
+                <button className="approve">Approve</button>
+                <button className="discard">Discard</button>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div className="notificationArea">
+              <h4>Rohit has requested RDS 200 from you</h4>
+              <div className="buttons">
+                <button className="approve">Approve</button>
+                <button className="discard">Discard</button>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div className="notificationArea">
+              <h4>Rohit has requested RDS 200 from you</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>
+  );
+}

From be6949b8f7dd4135eb1e12db039cab0e3cd6f255 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Fri, 12 Mar 2021 11:06:47 +0530
Subject: [PATCH 4/8]  Added notification page

---
 pages/notification.js | 70 ++++++++++---------------------------------
 1 file changed, 16 insertions(+), 54 deletions(-)

diff --git a/pages/notification.js b/pages/notification.js
index 8eed27a..d19bb1d 100644
--- a/pages/notification.js
+++ b/pages/notification.js
@@ -1,6 +1,7 @@
 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 (
@@ -8,60 +9,21 @@ export default function notification() {
       <NavBar personData={personData} />
       <div className="notification">
         <ul>
-          <li>
-            <div className="notificationArea">
-              <h4>Rohit has requested RDS 200 from you</h4>
-              <div className="buttons">
-                <button className="approve">Approve</button>
-                <button className="discard">Discard</button>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div className="notificationArea">
-              <h4>Rohit has requested RDS 200 from you</h4>
-              <div className="buttons">
-                <button className="approve">Approve</button>
-                <button className="discard">Discard</button>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div className="notificationArea">
-              <h4>Rohit has requested RDS 200 from you</h4>
-              <div className="buttons">
-                <button className="approve">Approve</button>
-                <button className="discard">Discard</button>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div className="notificationArea">
-              <h4>Rohit has requested RDS 200 from you</h4>
-              <div className="buttons">
-                <button className="approve">Approve</button>
-                <button className="discard">Discard</button>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div className="notificationArea">
-              <h4>Rohit has requested RDS 200 from you</h4>
-              <div className="buttons">
-                <button className="approve">Approve</button>
-                <button className="discard">Discard</button>
-              </div>
-            </div>
-          </li>
-          <li>
-            <div className="notificationArea">
-              <h4>Rohit has requested RDS 200 from you</h4>
-              <div className="buttons">
-                <button className="approve">Approve</button>
-                <button className="discard">Discard</button>
-              </div>
-            </div>
-          </li>
+          {
+            data.map((item) => {
+              return(
+                <li>
+                  <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>

From 0555b299a94bce1c8c10f71d774fea1672766f50 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Fri, 12 Mar 2021 11:08:11 +0530
Subject: [PATCH 5/8] Added dummy notification data for temporary

---
 mock/notifications.json | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 mock/notifications.json

diff --git a/mock/notifications.json b/mock/notifications.json
new file mode 100644
index 0000000..56c1752
--- /dev/null
+++ b/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"
+  }
+]

From 2eefdac0d932eaea540c60622b1afe10dd0432a7 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Fri, 12 Mar 2021 14:34:45 +0530
Subject: [PATCH 6/8]  Added notification page

---
 pages/notification.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/notification.js b/pages/notification.js
index d19bb1d..7811035 100644
--- a/pages/notification.js
+++ b/pages/notification.js
@@ -10,9 +10,9 @@ export default function notification() {
       <div className="notification">
         <ul>
           {
-            data.map((item) => {
+            data.map((item, index) => {
               return(
-                <li>
+                <li key="index">
                   <div className="notificationArea">
                     <h4>{item.notification}</h4>
                     <div className="buttons">

From 105adee3d716a1458a5c3410167654befaac3872 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Fri, 12 Mar 2021 14:46:07 +0530
Subject: [PATCH 7/8]  Added notification page

---
 pages/notification.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/notification.js b/pages/notification.js
index 7811035..65ab713 100644
--- a/pages/notification.js
+++ b/pages/notification.js
@@ -12,7 +12,7 @@ export default function notification() {
           {
             data.map((item, index) => {
               return(
-                <li key="index">
+                <li key={index}>
                   <div className="notificationArea">
                     <h4>{item.notification}</h4>
                     <div className="buttons">

From 7408e2b8627483721372dd9fef1a3c2ef7e640d2 Mon Sep 17 00:00:00 2001
From: RohitKuwar <70262783+RohitKuwar@users.noreply.github.com>
Date: Fri, 12 Mar 2021 14:52:07 +0530
Subject: [PATCH 8/8] Added notification page

---
 pages/notification.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/pages/notification.js b/pages/notification.js
index 65ab713..2085832 100644
--- a/pages/notification.js
+++ b/pages/notification.js
@@ -10,8 +10,7 @@ export default function notification() {
       <div className="notification">
         <ul>
           {
-            data.map((item, index) => {
-              return(
+            data.map((item, index) =>            
                 <li key={index}>
                   <div className="notificationArea">
                     <h4>{item.notification}</h4>
@@ -21,8 +20,7 @@ export default function notification() {
                     </div>
                   </div>
                 </li>
-              )
-            })
+            )
           }
         </ul>
       </div>