add of unreadNotification and delete notification

src/components/Header/Header.module.css

@@ -81,6 +81,7 @@ svg {
     border-radius: 50%;
     width: 75px;
     height: 50px;
+    position: relative;
     svg {
         stroke: black;
         stroke-width: 3.5;
@@ -131,7 +132,7 @@ svg {
 
 .notificationDiv {
     position: absolute;
-    width: 200px;
+    width: 250px;
     top: 105%;
     right: 2rem;
     opacity: 0;
@@ -144,4 +145,38 @@ svg {
     opacity: 1;
     transform: translateY(0);
     z-index: 3;
-}
+}
+
+
+.notification{
+    margin-bottom: 7%;
+    display: flex;
+}
+
+.notificationBadge {
+    position: absolute;
+    top: 6px;
+    right: 9px;
+    width: 15px;
+    height: 15px;
+    background-color: red;
+    border-radius: 50%;
+}
+
+.closeBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    background: none;
+    margin: 0;
+    width: fit-content;
+}
+
+.closeBtn:focus {
+    outline: none;
+}
+.closeBtn:focus-visible {
+    outline: 2px solid black;
+}