code_public/pointeuse-optimisator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header : menu hamburger déroulant sur mobile

Browse Source 
Sous 700px les liens de navigation étaient entassés/rognés dans le
bandeau ; ils passent maintenant dans un panneau déroulant ouvert par
un bouton ☰, sans rien changer à l'affichage desktop (les liens
restent des enfants flex directs de <nav> via display:contents).
This commit is contained in:
Antoine
2026-08-20 17:35:12 +02:00
parent c89747bda6
commit f3670f56fe
1 changed files with 85 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
app/templates/base.html
View File

@ -42,14 +42,14 @@
/* ── Nav ── */
nav {
position: relative;
background: var(--nav-bg);
color: var(--ground);
min-height: 50px;
padding: .5rem 2rem;
height: 50px;
padding: 0 2rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .6rem 2rem;
gap: 2rem;
border-bottom: 3px solid var(--accent-2);
}
.nav-brand {
@ -88,9 +88,57 @@
}
.nav-logout { opacity: .6; font-size: 11px; }
/* Sur desktop les liens restent des enfants flex directs de <nav> (display:contents
les rend "transparents" au layout) ; sur mobile ils deviennent un panneau
déroulant contrôlé par le bouton hamburger. */
.nav-links { display: contents; }
.nav-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 32px;
height: 32px;
padding: 0;
background: none;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.nav-burger-bar {
display: block;
width: 20px;
height: 2px;
background: var(--ground);
transition: transform .15s, opacity .15s;
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 700px) {
nav { padding: .5rem 1rem; gap: .5rem 1rem; }
nav .spacer { flex-basis: 100%; height: 0; }
nav { padding: 0 1rem; }
.nav-burger { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--nav-bg);
border-bottom: 3px solid var(--accent-2);
padding: .5rem 0;
z-index: 200;
}
.nav-links.open { display: flex; }
.nav-links a.nav-link, .nav-links .nav-user {
padding: .75rem 1.25rem;
width: 100%;
}
.nav-links .nav-user { display: block; }
}
/* ── Layout ── */
@ -1116,17 +1164,41 @@
<a href="/" class="nav-brand"><span class="nav-dot"></span>Décompte Horaire</a>
<span class="spacer"></span>
{% if current_user is defined and current_user %}
<a href="/" class="nav-link">Semaine courante</a>
<a href="/stats" class="nav-link">Statistiques</a>
<a href="/logs" class="nav-link">Journaux</a>
<a href="/settings" class="nav-link">Réglages</a>
<a href="/aide" class="nav-link">Aide</a>
<span class="nav-user">{{ current_user }}</span>
<a href="/logout" class="nav-link nav-logout">Déconnexion</a>
<button type="button" class="nav-burger" id="nav-burger" aria-expanded="false"
aria-controls="nav-links" aria-label="Menu" onclick="toggleNavMenu()">
<span class="nav-burger-bar"></span><span class="nav-burger-bar"></span><span class="nav-burger-bar"></span>
</button>
<div class="nav-links" id="nav-links">
<a href="/" class="nav-link">Semaine courante</a>
<a href="/stats" class="nav-link">Statistiques</a>
<a href="/logs" class="nav-link">Journaux</a>
<a href="/settings" class="nav-link">Réglages</a>
<a href="/aide" class="nav-link">Aide</a>
<span class="nav-user">{{ current_user }}</span>
<a href="/logout" class="nav-link nav-logout">Déconnexion</a>
</div>
{% endif %}
</nav>
<div class="container">
{% block content %}{% endblock %}
</div>
<script>
function toggleNavMenu() {
var links = document.getElementById('nav-links');
var btn = document.getElementById('nav-burger');
var open = !links.classList.contains('open');
links.classList.toggle('open', open);
btn.setAttribute('aria-expanded', String(open));
}
document.addEventListener('click', function (e) {
var nav = document.querySelector('nav');
if (nav && !nav.contains(e.target)) {
var links = document.getElementById('nav-links');
var btn = document.getElementById('nav-burger');
if (links) links.classList.remove('open');
if (btn) btn.setAttribute('aria-expanded', 'false');
}
});
</script>
</body>
</html>