127 lines
5.5 KiB
React
127 lines
5.5 KiB
React
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([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
|
|
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);
|
|
}}
|
|
>
|
|
<img className={styles.notificationsImg} src="/bell.svg" alt="notifications"/>
|
|
{unreadNotification && <span className={styles.notificationBadge}></span>}
|
|
</button>
|
|
|
|
<Link to="/profile" className={styles.profileLink}>
|
|
<img className={styles.profileImg} src="/person.svg" alt="profile"/>
|
|
</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 className={styles.notification}>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))}
|
|
>
|
|
<img src="/close.svg" alt="supprimer la notification"/>
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Header; |