Inklapbare zijbalk voor een klantportaal Nieuw

<!-- Inklapbare zijbalk voor een klantportaal · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="zbp">
<aside class="zbp__side" id="zbp-side">
<div class="zbp__top"><span class="zbp__logo" aria-hidden="true">W</span><span class="zbp__name">Woonzorg Delta</span>
<button class="zbp__tgl" type="button" aria-expanded="true" aria-controls="zbp-side" aria-label="Zijbalk inklappen"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg></button></div>
<nav class="zbp__nav" aria-label="Portaal">
<a class="zbp__a" href="#zbp-overzicht" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></svg><span class="zbp__lab">Overzicht</span></a>
<a class="zbp__a" href="#zbp-facturen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12v18l-3-2-3 2-3-2-3 2z"/><path d="M9 8h6M9 12h6"/></svg><span class="zbp__lab">Facturen</span><b class="zbp__badge">2</b></a>
<a class="zbp__a" href="#zbp-documenten"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></svg><span class="zbp__lab">Documenten</span></a>
<a class="zbp__a" href="#zbp-afspraken"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg><span class="zbp__lab">Afspraken</span></a>
</nav>
</aside>
<main class="zbp__main">
<h3 class="zbp__h">Overzicht</h3>
<p class="zbp__t">Openstaand: &euro; 1.284,50 in 2 facturen. De eerstvolgende vervalt op 20 oktober.</p>
</main>
</div>
</div>

/* Inklapbare zijbalk voor een klantportaal · NedDev · eigen werk. */
.zbp{position:absolute;inset:0;display:flex;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left}
.zbp *,.zbp *::before,.zbp *::after{box-sizing:border-box}
.zbp__side{position:relative;z-index:2;flex:none;width:204px;display:flex;flex-direction:column;gap:4px;padding:10px 8px;background:#0a0a0a;color:#fff;transition:width .24s cubic-bezier(.3,.7,.2,1)}
.zbp__top{position:relative;display:flex;align-items:center;gap:8px;height:36px;margin-bottom:6px;padding-left:4px}
.zbp__logo{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:4px;background:#F5480F;color:#0a0a0a;font:700 15px/1 'Switzer',sans-serif}
.zbp__name{flex:1;min-width:0;font:600 14px/1.1 'Switzer',sans-serif;white-space:nowrap;overflow:hidden;transition:opacity .16s}
.zbp__tgl{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:none;color:#fff;cursor:pointer}
.zbp__tgl:hover{border-color:#fff}
.zbp__tgl:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.zbp__tgl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s}
.zbp__nav{display:flex;flex-direction:column;gap:2px}
.zbp__a{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 9px;border-radius:4px;color:#d6d3cd;text-decoration:none;font:500 14px/1 'Switzer',sans-serif;outline:none}
.zbp__a svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zbp__a:hover{background:rgba(255,255,255,.08);color:#fff}
.zbp__a[aria-current="page"]{background:#fff;color:#0a0a0a}
.zbp__a:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.zbp__lab{white-space:nowrap;transition:opacity .16s}
.zbp__badge{margin-left:auto;min-width:20px;height:20px;padding:0 5px;border-radius:4px;background:#F5480F;color:#0a0a0a;font:700 12px/20px 'Switzer',sans-serif;text-align:center}
.zbp.is-mini .zbp__side{width:56px}
.zbp.is-mini .zbp__name{opacity:0;width:0;flex:0}
.zbp.is-mini .zbp__top{padding-left:6px}
.zbp.is-mini .zbp__logo{display:none}
.zbp.is-mini .zbp__tgl svg{transform:rotate(180deg)}
.zbp.is-mini .zbp__lab{position:absolute;left:calc(100% + 10px);top:50%;transform:translate(-4px,-50%);padding:6px 8px;border-radius:4px;background:#0a0a0a;color:#fff;font:500 13px/1 'Switzer',sans-serif;opacity:0;pointer-events:none;transition:opacity .14s,transform .14s}
.zbp.is-mini .zbp__a:hover .zbp__lab,.zbp.is-mini .zbp__a:focus-visible .zbp__lab{opacity:1;transform:translate(0,-50%)}
.zbp.is-mini .zbp__badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 3px;font-size:12px;line-height:16px}
.zbp__main{flex:1;min-width:0;padding:18px 20px;overflow:auto}
.zbp__h{margin:0 0 6px;font:600 20px/1.15 'Switzer',sans-serif;letter-spacing:-.015em}
.zbp__t{margin:0;font:400 14px/1.45 'Switzer',sans-serif;color:#3a3733;max-width:32em}
@media (prefers-reduced-motion:reduce){.zbp__side,.zbp__tgl svg,.zbp__name,.zbp__lab,.zbp.is-mini .zbp__lab{transition:none}}

// Inklapbare zijbalk voor een klantportaal · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.zbp');if(!w)return;
var tgl=w.querySelector('.zbp__tgl'),links=[].slice.call(w.querySelectorAll('.zbp__a')),h=w.querySelector('.zbp__h'),t=w.querySelector('.zbp__t'),KEY='zbp-ingeklapt';
var TXT={Overzicht:'Openstaand: \u20ac 1.284,50 in 2 facturen. De eerstvolgende vervalt op 20 oktober.',Facturen:'2 facturen staan open. Betalen kan met iDEAL of per overschrijving.',Documenten:'Je huurcontract en de laatste jaarafrekening staan klaar om te downloaden.',Afspraken:'Onderhoud cv-ketel op woensdag 22 oktober tussen 8:00 en 12:00.'};
function set(mini,save){w.classList.toggle('is-mini',mini);tgl.setAttribute('aria-expanded',mini?'false':'true');tgl.setAttribute('aria-label',mini?'Zijbalk uitklappen':'Zijbalk inklappen');
if(save){try{localStorage.setItem(KEY,mini?'1':'0');}catch(e){}}}
var saved=null;try{saved=localStorage.getItem(KEY);}catch(e){}
set(saved===null?w.clientWidth<380:saved==='1',false);
tgl.addEventListener('click',function(){set(!w.classList.contains('is-mini'),true);});
w.addEventListener('keydown',function(e){if((e.ctrlKey||e.metaKey)&&(e.key==='b'||e.key==='B')){e.preventDefault();set(!w.classList.contains('is-mini'),true);}});
links.forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();links.forEach(function(o){o.removeAttribute('aria-current');});a.setAttribute('aria-current','page');var n=a.querySelector('.zbp__lab').textContent;h.textContent=n;t.textContent=TXT[n]||'';});});
}
init(document.querySelector('.jouw-container'));