Dock met vergroting Nieuw

<!-- Dock met vergroting · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dkv">
<div class="dkv__screen">
<p class="dkv__hi">Goedemiddag, Sanne</p>
<p class="dkv__sub" aria-live="polite">Je bekijkt nu: Overzicht</p>
<p class="dkv__note">Factuur 2026-0412 staat klaar en de afspraak van donderdag 10:00 is bevestigd.</p>
</div>
<nav class="dkv__bar" aria-label="Portaal">
<a class="dkv__it" href="#dkv-overzicht" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11l8-6 8 6v8a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z"/></svg><span class="dkv__tip">Overzicht</span></a>
<a class="dkv__it" href="#dkv-agenda"><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="dkv__tip">Agenda</span></a>
<a class="dkv__it" href="#dkv-berichten"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v10H9l-5 4z"/></svg><span class="dkv__tip">Berichten</span></a>
<a class="dkv__it" href="#dkv-documenten"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></svg><span class="dkv__tip">Documenten</span></a>
<a class="dkv__it" href="#dkv-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="dkv__tip">Facturen</span></a>
<a class="dkv__it" href="#dkv-instellingen"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg><span class="dkv__tip">Instellingen</span></a>
</nav>
</div>
</div>

/* Dock met vergroting · NedDev · eigen werk. */
.dkv{position:absolute;inset:0;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.dkv *,.dkv *::before,.dkv *::after{box-sizing:border-box}
.dkv__screen{padding:22px 24px}
.dkv__hi{margin:0;font:600 22px/1.15 'Switzer',sans-serif;letter-spacing:-.015em}
.dkv__sub{margin:6px 0 0;font:400 14px/1.4 'Switzer',sans-serif;color:#57534e}
.dkv__note{margin:14px 0 0;max-width:30em;padding:10px 12px;background:#fff;border-radius:4px;font:400 13px/1.45 'Switzer',sans-serif;color:#3a3733}
@media (max-width:420px){.dkv__screen{padding:16px 16px}.dkv__note{margin-top:10px}}
.dkv__bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:6px;height:56px;padding:7px 8px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;box-shadow:0 8px 24px -14px rgba(10,10,10,.35)}
.dkv__it{--s:1;position:relative;flex:none;display:grid;place-items:center;width:calc(40px * var(--s));height:calc(40px * var(--s));border-radius:8px;background:#0a0a0a;color:#fff;text-decoration:none;outline:none}
.dkv__it svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dkv__it[aria-current="page"]{background:#F5480F;color:#0a0a0a}
.dkv__it[aria-current="page"]::after{content:'';position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#0a0a0a}
.dkv__it:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #F5480F}
.dkv__tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:5px 8px;border-radius:4px;background:#0a0a0a;color:#fff;font:500 12px/1 'Switzer',sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}
.dkv__it:hover .dkv__tip,.dkv__it:focus-visible .dkv__tip{opacity:1;transform:translate(-50%,0)}
@media (max-width:420px){.dkv__it{width:calc(36px * var(--s));height:calc(36px * var(--s))}.dkv__bar{height:52px}}
@media (prefers-reduced-motion:reduce){.dkv__tip{transition:none}}

// Dock met vergroting · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.dkv');if(!w)return;
var bar=w.querySelector('.dkv__bar'),its=[].slice.call(w.querySelectorAll('.dkv__it')),sub=w.querySelector('.dkv__sub');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
var cur=its.map(function(){return 1;}),tgt=its.map(function(){return 1;}),raf=0,MAX=0.55,R=120;
function apply(){var moving=false;for(var k=0;k<its.length;k++){cur[k]+=(tgt[k]-cur[k])*0.16;if(Math.abs(tgt[k]-cur[k])>0.002)moving=true;else cur[k]=tgt[k];its[k].style.setProperty('--s',cur[k].toFixed(3));}raf=moving?requestAnimationFrame(apply):0;}
function kick(){if(!raf)raf=requestAnimationFrame(apply);}
function aim(x){var room=w.clientWidth-24,base=its[0].offsetWidth/(cur[0]||1),gap=6,total=0;
its.forEach(function(it,k){var r=it.getBoundingClientRect(),d=Math.abs(x-(r.left+r.width/2));var f=d>=R?0:(Math.cos(Math.PI*d/R)+1)/2;tgt[k]=1+MAX*f;total+=base*tgt[k]+gap;});
if(total>room){var over=(total-room)/base,extra=tgt.reduce(function(a,b){return a+b-1;},0)||1;tgt=tgt.map(function(t){return 1+(t-1)*Math.max(0,1-over/extra);});}
kick();}
function rest(){tgt=its.map(function(){return 1;});kick();}
if(!rm){bar.addEventListener('pointermove',function(e){if(e.pointerType!=='mouse')return;aim(e.clientX);});
bar.addEventListener('pointerleave',function(){if(!bar.contains(document.activeElement))rest();});}
its.forEach(function(it,k){
it.addEventListener('focus',function(){if(rm)return;var r=it.getBoundingClientRect();aim(r.left+r.width/2);});
it.addEventListener('blur',function(){setTimeout(function(){if(!bar.contains(document.activeElement))rest();},0);});
it.addEventListener('click',function(e){e.preventDefault();its.forEach(function(o){o.removeAttribute('aria-current');});it.setAttribute('aria-current','page');sub.textContent='Je bekijkt nu: '+it.querySelector('.dkv__tip').textContent;});
it.addEventListener('keydown',function(e){var n=null;if(e.key==='ArrowRight')n=its[(k+1)%its.length];else if(e.key==='ArrowLeft')n=its[(k-1+its.length)%its.length];else if(e.key==='Home')n=its[0];else if(e.key==='End')n=its[its.length-1];if(n){e.preventDefault();n.focus();}});
});
}
init(document.querySelector('.jouw-container'));