add of unreadNotification and delete notification

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>
     )