53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
/**
|
|
* public/js/header.js
|
|
* Comportements interactifs du header :
|
|
* - Bascule thème clair / sombre
|
|
* - Ouverture / fermeture du dropdown de connexion
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// ── THÈME ───────────────────────────────────────────────────
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
|
|
themeToggle.addEventListener('click', function () {
|
|
const current = document.documentElement.getAttribute('data-theme');
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('mc-theme', next);
|
|
});
|
|
|
|
// ── DROPDOWN CONNEXION ──────────────────────────────────────
|
|
const loginWrapper = document.getElementById('loginWrapper');
|
|
const loginToggle = document.getElementById('loginToggle');
|
|
const loginDropdown = document.getElementById('loginDropdown');
|
|
|
|
/** Ouvre ou ferme le dropdown */
|
|
function toggleDropdown(force) {
|
|
const willOpen = force !== undefined ? force : !loginDropdown.classList.contains('open');
|
|
loginDropdown.classList.toggle('open', willOpen);
|
|
loginToggle.setAttribute('aria-expanded', String(willOpen));
|
|
}
|
|
|
|
// Clic sur le bouton
|
|
loginToggle.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
toggleDropdown();
|
|
});
|
|
|
|
// Clic en dehors → fermeture
|
|
document.addEventListener('click', function (e) {
|
|
if (!loginWrapper.contains(e.target)) {
|
|
toggleDropdown(false);
|
|
}
|
|
});
|
|
|
|
// Touche Échap → fermeture
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
toggleDropdown(false);
|
|
}
|
|
});
|
|
|
|
});
|