creation of Header component

2025-10-26 20:44:54 +01:00
parent 5b55ae6994
commit b6a15f61f3
6 changed files with 250 additions and 10 deletions
@@ -0,0 +1,67 @@
+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 notificationRef = useRef(null);
+
+    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={styles.headerContent}>
+                    <div className={styles.headerLeftContent}>
+                        <NavLink className={styles.link} to="/">
+                            <img src="/src/assets/logo.png" alt="logo" className={styles.logo}/>
+                        </NavLink>
+                        <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
+                            Accueil
+                        </NavLink>
+                        <NavLink to="/event" 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 className={styles.headerRightContent}>
+                        <button
+                            className={`${styles.bellBtn}  ${notificationMenu ? styles.activeBellBtn : ""}`}
+                            onClick={() => setnotificationMenu(!notificationMenu)}>
+                            <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>
+                        </button>
+                        <Link to="" className={styles.profileLink}>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="70" viewBox="0 -960 960 960" width="auto">
+                                <path fill="#000000" d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/>
+                            </svg>
+                        </Link>
+                    </div>
+                </nav>
+            </header>
+            <div ref={notificationRef} className={`${styles.notificationDiv} ${"glassCard"} ${notificationMenu ? styles.activeNotificationDiv : ""}`}>
+                <p>fhzi</p>
+                <p>fhzi</p>
+                <p>fhzi</p>
+            </div>
+        </div>
+    )
+}
+
+export default Header;
@@ -0,0 +1,147 @@
+.headerContainer {
+    position: relative;
+    height: fit-content;
+    overflow: visible;
+}
+
+
+.header{
+    display: flex;
+    align-items: center;
+    padding: 0.8rem;
+    height: fit-content;
+    z-index: 2;
+}
+
+
+.headerContent {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.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;
+    gap: 1rem;
+}
+
+.logo {
+    height: 4rem;
+    width: auto;
+}
+
+.link {
+    color: black;
+    width: fit-content;
+    text-align: center;
+    font-weight: bold;
+}
+
+.link:hover {
+    color: #535bf2;
+}
+
+.activeLink {
+    width: fit-content;
+    text-align: center;
+    font-weight: bold;
+    color: #019AFF;
+}
+
+
+
+
+
+svg {
+    width: fit-content;
+}
+
+
+
+
+.bellBtn {
+    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: 75px;
+    height: 50px;
+    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 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.5s ease;
+}
+
+.profileLink:hover {
+    transform: translateY(-4px);
+}
+
+
+
+
+.notificationDiv {
+    position: absolute;
+    width: 200px;
+    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;
+}
@@ -1,5 +1,6 @@
 /* BACKGROUND ////////////////////////////////////////////////////////*/
 .background-container {
+  z-index: 0;
  margin: 0;
  padding: 0;
  min-height: 100vh;
@@ -47,8 +48,8 @@
  width: 500px;
  height: 500px;
  background-color: rgb(244, 244, 172);
-  bottom: 0%;
-  right: 0%;
+  bottom: 0;
+  right: 0;
 }

 .circle-5 {
@@ -24,6 +24,7 @@

 .content {
  padding: 1.5rem;
+  z-index: 1;
 }


@@ -34,9 +35,6 @@ a {
  color: #646cff;
  text-decoration: inherit;
 }
-a:hover {
-  color: #535bf2;
-}

 body {
  margin: 0;
@@ -51,7 +49,7 @@ body {
 .glassCard {
  width: 100%;
  padding: 10px 20px 10px 20px;
-  height: 360px;
+  height: fit-content;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
@@ -1,15 +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>
-            <div className="content">
-                <Outlet />
-                <Footer />
-            </div>
+            <Background>
+                <div className="content">
+                    <Header />
+                    <Outlet />
+                    <Footer />
+                </div>
+            </Background>
        </div>
    )
 }
@@ -4,6 +4,28 @@ function HomePage(){

    return (
        <div>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
+            <p>jbgejin</p>
        </div>
    )
 }