cd6a66893a
- Implémentation des composants React (8 trajectoires, Human Employment Model, méthodologie 6 étapes, Learning by Doing, exemples de projets, compétences) - Rendu dynamique des cartes via .map() - Configuration du routage SPA dans Symfony (route catch-all) et React Router (Header Link) - Ajustements graphiques et CSS conformes au Figma (#F4F1EA, vert olive)
77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import logo from '../img/logo_gaea21.png';
|
|
|
|
export default function Header() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const closeMenu = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<header className="navbar-container">
|
|
<div className="navbar-content">
|
|
{/* Logo gaea21 ramenant à l'accueil */}
|
|
<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' : ''}`}>
|
|
<ul className="nav-links">
|
|
<li>
|
|
<Link to="/#parcours" onClick={closeMenu}>
|
|
Parcours
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/trajectoire" onClick={closeMenu}>
|
|
Projet
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/#ecosysteme" onClick={closeMenu}>
|
|
Écosystème
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/#contact" onClick={closeMenu}>
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Bouton d'action */}
|
|
<div className="navbar-action">
|
|
<Link
|
|
to="/#participer"
|
|
className="btn-participer"
|
|
onClick={closeMenu}
|
|
>
|
|
Participer
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |