Merge branch 'dev' into 'features/loginPage'

# Conflicts:
#   src/components/background/background.module.css
#   src/index.css

src/assets/bell.svg

@@ -0,0 +1,3 @@
+<svg width="60px" height="60px" 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="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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/assets/person.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="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.93H180Zm60-60h480v-28.93q0-12.15-7.04-22.5-7.04-10.34-19.11-16.88-51.7-25.46-105.42-38.58Q534.7-367.69 480-367.69q-54.7 0-108.43 13.11-53.72 13.12-105.42 38.58-12.07 6.54-19.11 16.88-7.04 10.35-7.04 22.5v28.93Zm240-304.62q33 0 56.5-23.5t23.5-56.5q0-33-23.5-56.5t-56.5-23.5q-33 0-56.5 23.5t-23.5 56.5q0 33 23.5 56.5t56.5 23.5Zm0-80Zm0 384.62Z"/></svg>

src/components/Footer/Footer.jsx

@@ -0,0 +1,16 @@
+import styles from "./Footer.module.css"
+import {Link} from "react-router";
+
+function Footer(){
+    return (
+        <footer className={`${styles.footer} ${"glassCard"}`} >
+            <div className={styles.footerContent}>
+                <Link to="" className={styles.link}>Contact</Link>
+                <Link to="" className={styles.link}>RGPD</Link>
+                <Link to="" className={styles.link}>Mentions légales</Link>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer;

src/components/Footer/Footer.module.css

@@ -0,0 +1,34 @@
+.footer{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: fit-content;
+    padding: 2rem;
+}
+
+.footerContent {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.link {
+    color: black;
+    width: fit-content;
+    text-align: center;
+}
+
+
+
+@media screen and (max-width: 480px) {
+    .footer{
+        padding: 1rem;
+    }
+
+    .footerContent{
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+    }
+}

src/components/Header/Header.jsx

@@ -0,0 +1,129 @@
+import styles from "./Header.module.css"
+import { Link, NavLink } from "react-router";
+import { useEffect, useRef, useState } from "react";
+
+function Header() {
+    const [notificationMenu, setnotificationMenu] = useState(false);
+    const [unreadNotification, setunreadNotification] = useState(true);
+    const [mobileMenu, setMobileMenu] = useState(false);
+    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}`)
+            ) {
+                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="/src/assets/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}</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;

src/components/Header/Header.module.css

@@ -0,0 +1,272 @@
+.headerContainer {
+    position: relative;
+    height: fit-content;
+    overflow: visible;
+}
+
+
+.header{
+    display: flex;
+    align-items: center;
+    padding: 0.8rem;
+    height: fit-content;
+    z-index: 2;
+    position: relative;
+    justify-content: space-between;
+}
+
+
+
+.activeHeaderContent {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+    pointer-events: auto;
+}
+.inactiveHeaderContent{
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    position: absolute;
+    top: 0.8rem;
+    left: 0.8rem;
+}
+
+
+.inactiveMobileMenu{
+    max-height: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+}
+
+.activeMobileMenu{
+    transition: max-height 3s ease;
+    max-height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 0.5rem;
+}
+
+
+
+
+.headerLeftContent {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    gap: 1.5rem;
+    font-size: 1.2rem;
+}
+
+.headerRightContent {
+    width: fit-content;
+    display: flex;
+    align-items: center;
+}
+
+.logo {
+    height: 4rem;
+    width: auto;
+    flex-shrink: 0;
+}
+
+.logoLink {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: fit-content;
+    flex-shrink: 0;
+}
+
+
+.link {
+    color: #000000;
+    width: fit-content;
+    text-align: center;
+    font-weight: bold;
+    border-bottom: 2px solid transparent;
+}
+
+.link:hover{
+    border-bottom: 2px solid #019AFF;
+
+}
+
+.activeLink {
+    width: fit-content;
+    text-align: center;
+    font-weight: bold;
+    color: #019AFF;
+    border-bottom: 2px solid #019AFF;
+}
+
+svg {
+    width: fit-content;
+}
+
+.bellBtn, .profileLink {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.5s ease;
+    background: none;
+    padding: 7px;
+    border-radius: 50%;
+    width: 55px;
+    height: 55px;
+    position: relative;
+}
+
+.bellBtn svg {
+    stroke: black;
+    stroke-width: 3.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.bellBtn:focus {
+    outline: none;
+}
+.bellBtn:focus-visible {
+    outline: 2px solid black;
+}
+
+.activeBellBtn {
+    transform: translateY(-4px);
+    background: rgba(191, 191, 191, 0.5);
+    svg {
+        stroke: #019AFF;
+    }
+}
+
+.bellBtn:hover {
+    transform: translateY(-4px);
+    background: rgba(191, 191, 191, 0.5);
+    svg {
+        stroke: #019AFF;
+    }
+}
+
+
+.profileLink:hover {
+    transform: translateY(-4px);
+    background: rgba(191, 191, 191, 0.5);
+    svg {
+        fill: #019AFF;
+    }
+}
+
+.bellBtn svg {
+    height: 28px;
+}
+
+.profileLink svg {
+    height: 40px;
+}
+
+.notificationDiv {
+    position: absolute;
+    width: 250px;
+    top: 105%;
+    right: 2rem;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    z-index: 1;
+}
+
+.activeNotificationDiv {
+    opacity: 1;
+    transform: translateY(0);
+    z-index: 3;
+}
+
+
+.notification{
+    margin-bottom: 7%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.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;
+}
+
+.burgerBtn {
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 22px;
+    border: none;
+    cursor: pointer;
+    display: none;
+    z-index: 10;
+}
+
+.burgerBar {
+    width: 100%;
+    height: 3px;
+    background-color: #000000;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.activeBurgerBtn .burgerBar:nth-child(1) {
+    transform: translateY(10px) rotate(45deg);
+}
+.activeBurgerBtn .burgerBar:nth-child(2) {
+    opacity: 0;
+}
+.activeBurgerBtn .burgerBar:nth-child(3) {
+    transform: translateY(-9px) rotate(-45deg);
+}
+
+
+.navLinks{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+
+@media screen and (max-width: 768px) {
+    .navLinks {
+        display: none;
+    }
+    .burgerBtn {
+        display: flex;
+    }
+}

src/index.css

@@ -3,7 +3,9 @@
   padding: 0;
   width: 100%;
   box-sizing: border-box;
+  overflow-x: hidden;
 }
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -18,14 +20,21 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+
+
+.content {
+  padding: 1.5rem;
+  z-index: 1;
+}
+
+
+
+
 a {
   font-weight: 500;
   color: #646cff;
   text-decoration: inherit;
 }
-a:hover {
-  color: #535bf2;
-}
 
 body {
   margin: 0;
@@ -39,8 +48,9 @@ body {
 
 .glassCard {
   width: 100%;
-  padding: 12px 12px 12px 12px;
+  padding: 10px 20px 10px 20px;
-  background: rgba(255, 255, 255, 0.5);
+  height: fit-content;
+  background: rgba(255, 255, 255, 0.65);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   border-radius: 20px;

src/layout.jsx

@@ -1,11 +1,20 @@
 import { Outlet } from "react-router";
+import Footer from "./components/Footer/Footer.jsx"
+import Header from "./components/Header/Header.jsx";
+import Background from "./components/background/background.jsx";
 
 
 function Layout(){
 
     return (
         <div>
+            <Background>
+                <div className="content">
+                    <Header />
                     <Outlet />
+                    <Footer />
+                </div>
+            </Background>
         </div>
     )
 }

src/pages/Home/HomePage.jsx

@@ -1,10 +1,9 @@
-import styles from "./HomePage.module.css"
+
 
 function HomePage(){
 
     return (
         <div>
-            <h1 className={styles.title}>Accueil</h1>
         </div>
     )
 }