SAE-BUT2-frontend/src/components/Header/Header.jsx

import styles from "./Header.module.css"
import { Link, NavLink } from "react-router";
import { useEffect, useRef, useState } from "react";
import getUserNotifications from "../../utils/getUserNotifications.js";

function Header() {
    const [notificationMenu, setnotificationMenu] = useState(false);
    const [unreadNotification, setunreadNotification] = useState(true);
    const [mobileMenu, setMobileMenu] = useState(false);
    const [notifications, setNotifications] = useState([]);
    const notificationRef = useRef(null);



    useEffect(() => {
        async function loadNotifications() {
            const notifData = await getUserNotifications();
            setNotifications(notifData || []);
        }

        loadNotifications();
        const handleClickOutside = (event) => {
            if (
                notificationRef.current &&
                !notificationRef.current.contains(event.target) &&
                !event.target.closest(`.${styles.bellBtn}`)
            ) {
                setnotificationMenu(false);
            }
        };

        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    return (
        <div className={styles.headerContainer}>
            <header className={`${styles.header} glassCard`}>
                <nav className={`${mobileMenu ? styles.inactiveHeaderContent : styles.activeHeaderContent}`}>
                    <div className={styles.headerLeftContent}>
                        <NavLink className={styles.logoLink} to="/">
                            <img src="logo.png" alt="logo" className={styles.logo} />
                        </NavLink>
                        <div className={styles.navLinks}>
                            <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                Accueil
                            </NavLink>
                            <NavLink to="/events" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                Evènements
                            </NavLink>
                            <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                Bénévoles
                            </NavLink>
                        </div>
                    </div>

                    <div className={styles.headerRightContent}>
                        <button
                            className={`${styles.bellBtn} ${notificationMenu ? styles.activeBellBtn : ""}`}
                            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>}
                        </button>

                        <Link to="" className={styles.profileLink}>
                            <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="auto" fill="currentFill">
                                <path d="M480-492.31q-57.75 0-98.87-41.12Q340-574.56 340-632.31q0-57.75 41.13-98.87 41.12-41.13 98.87-41.13 57.75 0 98.87 41.13Q620-690.06 620-632.31q0 57.75-41.13 98.88-41.12 41.12-98.87 41.12ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Z" />
                            </svg>
                        </Link>
                    </div>
                </nav>

                <nav className={`${mobileMenu ? styles.activeMobileMenu : styles.inactiveMobileMenu}`}>
                    <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                        Accueil
                    </NavLink>
                    <NavLink to="/events" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                        Evènements
                    </NavLink>
                    <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                        Bénévoles
                    </NavLink>
                </nav>


                <button
                    className={`${styles.burgerBtn} ${mobileMenu ? styles.activeBurgerBtn : ""}`}
                    onClick={() => setMobileMenu(!mobileMenu)}
                >
                    <div className={styles.burgerBar}></div>
                    <div className={styles.burgerBar}></div>
                    <div className={styles.burgerBar}></div>
                </button>
            </header>




            <div
                ref={notificationRef}
                className={`${styles.notificationDiv} glassCard ${notificationMenu ? styles.activeNotificationDiv : ""}`}
            >
                {notifications.length === 0 ? (
                    <p>Vous n'avez aucune notification !</p>
                ) : (
                    notifications.map((notification, index) => (
                        <div className={styles.notification} key={index}>
                            <p>{notification.content}</p>
                            <button
                                className={styles.closeBtn}
                                onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px">
                                    <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>
                            </button>
                        </div>
                    ))
                )}
            </div>
        </div>
    );
}

export default Header;