bb1393e9ef
- Prise en charge du thème sombre du Header sur la route /parcours - Ajout de la section Hero et présentation des chiffres clés - Grille des profils 'Qui peut rejoindre' avec méthode map() et icônes - Intégration de la timeline verticale des étapes d'intégration - Ajout du bandeau 'Learning by Doing' - Restructuration des composants par dossier
94 lines
3.5 KiB
JavaScript
94 lines
3.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import logo from '../../img/logo_gaea21.png';
|
|
import '../../styles/header.css';
|
|
|
|
export default function Header({ onNavigate }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const location = useLocation();
|
|
|
|
// Active la couleur blanche (nav-light) pour trajectoire, projet et parcours
|
|
const isDark =
|
|
location.pathname === '/trajectoire' ||
|
|
location.pathname === '/projet' ||
|
|
location.pathname === '/parcours';
|
|
|
|
const closeMenu = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<header className="navbar-container">
|
|
<div className="navbar-content">
|
|
{/* Logo gaea21 */}
|
|
<Link
|
|
to="/"
|
|
className="navbar-logo"
|
|
onClick={closeMenu}
|
|
aria-label="Retour à l'accueil gaea21"
|
|
>
|
|
<img src={logo} alt="Logo gaea21" />
|
|
</Link>
|
|
|
|
{/* Bouton burger mobile */}
|
|
<button
|
|
type="button"
|
|
className={`hamburger ${isOpen ? 'active' : ''}`}
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-label={isOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
|
aria-expanded={isOpen}
|
|
>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
|
|
{/* Navigation principale */}
|
|
<nav className={`navbar-nav ${isOpen ? 'open' : ''}`}>
|
|
{/* Applique la classe nav-light si la page a un fond sombre */}
|
|
<ul className={`nav-links ${isDark ? 'nav-light' : ''}`}>
|
|
<li>
|
|
<Link to="/parcours" onClick={closeMenu}>
|
|
Parcours
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/trajectoire"
|
|
onClick={() => {
|
|
closeMenu();
|
|
if (typeof onNavigate === 'function') {
|
|
onNavigate('trajectoire');
|
|
}
|
|
}}
|
|
>
|
|
Projet
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/#ecosysteme" onClick={closeMenu}>
|
|
Écosystème
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/#contact" onClick={closeMenu}>
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Bouton Participer */}
|
|
<div className="navbar-action">
|
|
<Link
|
|
to="/#participer"
|
|
className="btn-participer"
|
|
onClick={closeMenu}
|
|
>
|
|
Participer
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |