Nav mobile v2 : hamburger + panneau plein écran fixed (standard KA 2026-08-25)
Les liens de nav wrappaient dans le header sur mobile. Remplacés sous 760px par un hamburger 44px + panneau position:fixed inset:0 (z-modal) — visible peu importe la position de scroll, verrou de scroll, fermeture lien/✕/Escape. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +93 −3
modified
frontend/index.html
+93 −3
@@ -73,9 +73,12 @@ button{font-family:inherit} | ||
| 73 | 73 | .header-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;height:auto;min-height:64px;padding:6px 0} |
| 74 | 74 | .header-inner .gk-badge{flex:none} |
| 75 | 75 | @media(max-width:760px){ |
| 76 | − /* le header s'empile (badge Groupe KA + nav visibles) — pas de débordement */ | |
| 77 | − .header-inner{min-height:56px;padding:8px 0;gap:6px 12px} | |
| 78 | − .nav{margin-left:0;flex-wrap:wrap} | |
| 76 | + .header-inner{min-height:56px;padding:8px 0;gap:6px 10px} | |
| 77 | + /* KA Nav v2 (2026-08-25) : la nav inline cède la place au hamburger + panneau | |
| 78 | + plein écran fixed — menu visible peu importe la position de scroll */ | |
| 79 | + .nav{display:none} | |
| 80 | + #auth{margin-left:auto} | |
| 81 | + .ka-mnav-btn{display:flex} | |
| 79 | 82 | } |
| 80 | 83 | .brand{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.03em; |
| 81 | 84 | display:flex;align-items:baseline;line-height:1;cursor:pointer;position:relative} |
@@ -90,6 +93,46 @@ button{font-family:inherit} | ||
| 90 | 93 | border:1.5px solid transparent;border-radius:var(--r-ctl); |
| 91 | 94 | font-family:var(--font-display);font-weight:700;font-size:13.5px;transition:all .15s ease} |
| 92 | 95 | .nav a:hover{border-color:var(--ink);background:var(--accent-soft)} |
| 96 | + | |
| 97 | +/* ===== KA Nav v2 — menu mobile plein écran (standard 2026-08-25) ===== | |
| 98 | + Panneau position:fixed inset:0 (z-modal) → visible peu importe le scroll. */ | |
| 99 | +.ka-mnav-btn{display:none;width:44px;height:44px;flex:none; | |
| 100 | + flex-direction:column;align-items:center;justify-content:center;gap:5px; | |
| 101 | + background:var(--paper);border:1.5px solid var(--ink);border-radius:999px; | |
| 102 | + cursor:pointer;padding:0} | |
| 103 | +.ka-mnav-btn span{display:block;width:18px;height:2px;background:var(--ink); | |
| 104 | + border-radius:2px;transition:transform .18s ease,opacity .14s ease} | |
| 105 | +.ka-mnav-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} | |
| 106 | +.ka-mnav-btn[aria-expanded="true"] span:nth-child(2){opacity:0} | |
| 107 | +.ka-mnav-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} | |
| 108 | +.ka-mnav{position:fixed;inset:0;z-index:var(--z-modal,900);background:var(--paper); | |
| 109 | + display:none;flex-direction:column;overflow-y:auto;overscroll-behavior:contain} | |
| 110 | +.ka-mnav.open{display:flex;animation:ka-mnav-in .16s ease} | |
| 111 | +@keyframes ka-mnav-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} | |
| 112 | +.ka-mnav-top{display:flex;align-items:center;justify-content:space-between;flex:none; | |
| 113 | + min-height:64px;padding:0 18px;border-bottom:2px solid var(--ink);background:var(--paper)} | |
| 114 | +.ka-mnav-close{width:44px;height:44px;flex:none;display:flex;align-items:center; | |
| 115 | + justify-content:center;border:1.5px solid var(--ink);border-radius:999px; | |
| 116 | + background:var(--ink);color:var(--lime);font-size:17px;font-weight:700; | |
| 117 | + font-family:var(--font-display);cursor:pointer;padding:0;line-height:1} | |
| 118 | +.ka-mnav-links{display:flex;flex-direction:column;justify-content:center;flex:1; | |
| 119 | + padding:28px 24px;counter-reset:mnav} | |
| 120 | +.ka-mnav-links a{display:flex;align-items:baseline;gap:14px;padding:17px 0; | |
| 121 | + border-bottom:1.5px dashed rgba(20,24,20,.18);color:var(--ink)} | |
| 122 | +.ka-mnav-links a:last-child{border-bottom:0} | |
| 123 | +.ka-mnav-links a::before{counter-increment:mnav;content:"0" counter(mnav); | |
| 124 | + font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-deep)} | |
| 125 | +.ka-mnav-links a b{font-family:var(--font-display);font-weight:700; | |
| 126 | + font-size:27px;line-height:1;letter-spacing:-.03em;text-transform:uppercase} | |
| 127 | +.ka-mnav-links a.active b{background:var(--ink);color:var(--lime); | |
| 128 | + border-radius:6px;padding:4px 10px 6px} | |
| 129 | +.ka-mnav-foot{flex:none;border-top:2px solid var(--ink);padding:16px 24px; | |
| 130 | + padding-bottom:max(20px,env(safe-area-inset-bottom))} | |
| 131 | +.ka-mnav-sec{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px; | |
| 132 | + font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase; | |
| 133 | + letter-spacing:.06em} | |
| 134 | +.ka-mnav-sec a{color:var(--ink-3)} | |
| 135 | +html.ka-menu-locked,html.ka-menu-locked body{overflow:hidden} | |
| 93 | 136 | .btn-ka{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;min-height:38px; |
| 94 | 137 | border:1.5px solid var(--ink);border-radius:var(--r-ctl);background:var(--ink); |
| 95 | 138 | color:var(--lime);font-family:var(--font-display);font-weight:700;font-size:13px; |
@@ -444,9 +487,39 @@ button{font-family:inherit} | ||
| 444 | 487 | <a href="/docs" target="_blank" rel="noopener">API</a> |
| 445 | 488 | </nav> |
| 446 | 489 | <span id="auth"></span> |
| 490 | + <button id="ka-mnav-btn" class="ka-mnav-btn" aria-label="Ouvrir le menu" | |
| 491 | + aria-expanded="false" aria-controls="ka-mnav"> | |
| 492 | + <span></span><span></span><span></span> | |
| 493 | + </button> | |
| 447 | 494 | </div> |
| 448 | 495 | </header> |
| 449 | 496 | |
| 497 | +<!-- KA Nav v2 : panneau mobile plein écran (fixed inset:0 — visible peu importe le scroll) --> | |
| 498 | +<div id="ka-mnav" class="ka-mnav" role="dialog" aria-modal="true" aria-label="Menu"> | |
| 499 | + <div class="ka-mnav-top"> | |
| 500 | + <a class="brand" data-nav href="/">Sorti<span class="ka">·Ka</span></a> | |
| 501 | + <button class="ka-mnav-close" data-ka-mnav-close aria-label="Fermer le menu">✕</button> | |
| 502 | + </div> | |
| 503 | + <nav class="ka-mnav-links"> | |
| 504 | + <a data-nav href="/"><b>Sorties</b></a> | |
| 505 | + <a href="/#sources"><b>Sources</b></a> | |
| 506 | + <a data-nav href="/favoris"><b>♥ Favoris</b></a> | |
| 507 | + <a data-nav href="/stats"><b>Stats</b></a> | |
| 508 | + <a data-nav href="/contact"><b>Contact</b></a> | |
| 509 | + <a href="/docs" target="_blank" rel="noopener"><b>API</b></a> | |
| 510 | + </nav> | |
| 511 | + <div class="ka-mnav-foot"> | |
| 512 | + <a class="gk-badge" href="https://www.groupe-ka.com" target="_blank" rel="noopener noreferrer" | |
| 513 | + aria-label="Un service Groupe KA — visiter le portail de l'écosystème"> | |
| 514 | + Un service <b>Groupe<span class="ka">KA</span></b></a> | |
| 515 | + <div class="ka-mnav-sec"> | |
| 516 | + <a href="/doc/">Documentation</a> | |
| 517 | + <a href="https://www.groupe-ka.com/conditions" target="_blank" rel="noopener noreferrer">Conditions</a> | |
| 518 | + <a href="https://www.groupe-ka.com/confidentialite" target="_blank" rel="noopener noreferrer">Confidentialité</a> | |
| 519 | + </div> | |
| 520 | + </div> | |
| 521 | +</div> | |
| 522 | + | |
| 450 | 523 | <!-- ======== VUE LISTE ======== --> |
| 451 | 524 | <main id="view-list"> |
| 452 | 525 | <section class="hero container"> |
@@ -1829,6 +1902,23 @@ function bindNav(root){ | ||
| 1829 | 1902 | window.addEventListener("popstate", route); |
| 1830 | 1903 | $("back").onclick = () => go("/"); |
| 1831 | 1904 | |
| 1905 | +/* ---------- KA Nav v2 : menu mobile plein écran (2026-08-25) ---------- */ | |
| 1906 | +(function(){ | |
| 1907 | + const btn = document.getElementById("ka-mnav-btn"); | |
| 1908 | + const panel = document.getElementById("ka-mnav"); | |
| 1909 | + if(!btn || !panel) return; | |
| 1910 | + function setMenu(open){ | |
| 1911 | + panel.classList.toggle("open", open); | |
| 1912 | + btn.setAttribute("aria-expanded", open ? "true" : "false"); | |
| 1913 | + document.documentElement.classList.toggle("ka-menu-locked", open); | |
| 1914 | + } | |
| 1915 | + btn.addEventListener("click", () => setMenu(!panel.classList.contains("open"))); | |
| 1916 | + panel.addEventListener("click", e => { | |
| 1917 | + if(e.target.closest("a") || e.target.closest("[data-ka-mnav-close]")) setMenu(false); | |
| 1918 | + }); | |
| 1919 | + document.addEventListener("keydown", e => { if(e.key === "Escape") setMenu(false); }); | |
| 1920 | +})(); | |
| 1921 | + | |
| 1832 | 1922 | /* ---------- init ---------- */ |
| 1833 | 1923 | async function init(){ |
| 1834 | 1924 | favLoad(); // favoris ♥ — repeint les cœurs dès la réponse du hub |
| 1835 | 1925 | |