Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'features/header' into 'dev'

Browse Source 
Features/header

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!6
This commit is contained in:
JOSSERAND GIOVANNI p2405212
2025-11-02 22:43:04 +00:00
parent 5b55ae6994 cbd236fce5
commit 39075e1237
9 changed files with 420 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/bell.svg
+3
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 605 B

src/assets/close.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 222 B

src/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

src/assets/person.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 844 B

src/components/Header/Header.jsx
+129
View File
@@ -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="/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>
<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="/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>
</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
+272
View File
@@ -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/components/background/background.module.css
+3 -2
View File
@@ -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 {
src/index.css
+2 -4
View File
@@ -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);
src/layout.jsx
+9 -4
View File
@@ -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>
)
}