add of unreadNotification and delete notification

src/assets/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

src/components/Header/Header.jsx

@@ -4,8 +4,15 @@ import {useEffect, useRef, useState} from "react";
 
 function Header(){
     const [notificationMenu, setnotificationMenu] = useState(false);
+    const [unreadNotification, setunreadNotification] = useState(true);
     const notificationRef = useRef(null);
 
+    const [notifications, setNotifications] = useState([
+        "Vous avez un nouveau message !",
+        "Jean Paul est en attente de validation !",
+        "Vous avez un nouveau message !"
+    ]);
+
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (notificationRef.current && !notificationRef.current.contains(event.target) && !event.target.closest(`.${styles.bellBtn}`)) {
@@ -42,10 +49,11 @@ function Header(){
                     <div className={styles.headerRightContent}>
                         <button
                             className={`${styles.bellBtn}  ${notificationMenu ? styles.activeBellBtn : ""}`}
-                            onClick={() => setnotificationMenu(!notificationMenu)}>
+                            onClick={() => {setnotificationMenu(!notificationMenu); setunreadNotification(false);}}>
                             <svg width="auto" height="30" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M34.325 52.5C33.8855 53.2577 33.2546 53.8866 32.4956 54.3238C31.7365 54.761 30.8759 54.9911 30 54.9911C29.1241 54.9911 28.2635 54.761 27.5044 54.3238C26.7454 53.8866 26.1145 53.2577 25.675 52.5M45 20C45 16.0218 43.4196 12.2064 40.6066 9.3934C37.7936 6.58035 33.9782 5 30 5C26.0218 5 22.2064 6.58035 19.3934 9.3934C16.5804 12.2064 15 16.0218 15 20C15 37.5 7.5 42.5 7.5 42.5H52.5C52.5 42.5 45 37.5 45 20Z" stroke="currentStroke"/>
                             </svg>
+                            {unreadNotification ? <span className={styles.notificationBadge}></span> : null}
                         </button>
                         <Link to="" className={styles.profileLink}>
                             <svg xmlns="http://www.w3.org/2000/svg" height="70" viewBox="0 -960 960 960" width="auto">
@@ -56,9 +64,22 @@ function Header(){
                 </nav>
             </header>
             <div ref={notificationRef} className={`${styles.notificationDiv} ${"glassCard"} ${notificationMenu ? styles.activeNotificationDiv : ""}`}>
-                <p>fhzi</p>
-                <p>fhzi</p>
-                <p>fhzi</p>
+                {notifications.length === 0 ? (
+                    <p>Vous n'avez aucune notification !</p>
+                ) : (
+                    notifications.map((notification, index) => (
+                        <div className={styles.notification}>
+                            <p key={index}>{notification}</p>
+                            <button
+                                className={styles.closeBtn}
+                                onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}>
+                                <svg width="auto" height="30" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="50px" viewBox="0 -960 960 960" width="50px" fill="#000000"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
+                                </svg>
+                            </button>
+                        </div>
+                    ))
+                )}
             </div>
         </div>
     )

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;
+}