Elastyczne menu spółdzielni energetycznej

<main class="energy-page" id="energy-home" data-nav-kind="desktop">
  <header class="energy-header">
    <nav aria-label="Główna nawigacja spółdzielni">
      <div class="energy-nav-inner">
        <ul class="energy-brand-shell"><li><a class="energy-brand" href="#energy-home" aria-current="page"><b>WSPÓLNY PRĄD</b><span>spółdzielnia energetyczna</span></a></li></ul>
        <ul id="energy-primary" class="energy-primary">
          <li data-priority="1"><a href="#energy-production">Produkcja</a></li><li data-priority="2"><a href="#energy-members">Członkowie</a></li><li data-priority="3"><a href="#energy-settlements">Rozliczenia</a></li><li data-priority="4"><a href="#energy-investments">Inwestycje</a></li><li data-priority="5"><a href="#energy-about">O nas</a></li>
        </ul>
        <div class="energy-today"><span>DZISIAJ</span><b>68%</b><small>energii lokalnej</small></div>
        <ul class="energy-more-shell"><li><button id="energy-more-toggle" type="button" aria-expanded="false" aria-controls="energy-overflow">Więcej <span id="energy-more-count">2</span></button><ul id="energy-overflow" hidden><li data-fixed-more><a id="energy-community" href="#energy-community-target">Społeczność</a></li><li data-fixed-more><a href="#energy-contact">Kontakt</a></li></ul></li></ul>
      </div>
    </nav>
  </header>
  <section class="energy-hero" aria-labelledby="energy-title"><div><p>RAPORT / PAŹDZIERNIK</p><h1 id="energy-title">Energia<br>z sąsiedztwa.</h1></div><dl><div><dt>Produkcja dziś</dt><dd>14,8 MWh</dd></div><div><dt>Wspólnych instalacji</dt><dd>27</dd></div><div><dt>Bilans lokalny</dt><dd>+6,2%</dd></div></dl></section>
  <p id="energy-status" class="energy-status" role="status" aria-live="polite">Wybierz dział spółdzielni.</p>
  <section class="energy-targets" aria-label="Cele odnośników"><i id="energy-production"></i><i id="energy-members"></i><i id="energy-settlements"></i><i id="energy-investments"></i><i id="energy-about"></i><i id="energy-community-target"></i><i id="energy-contact"></i></section>
</main>

*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:#e9dda9;color:#161a17;font:16px/1.45 "Trebuchet MS",Arial,sans-serif}.energy-header{position:relative;border-bottom:2px solid #173d32;background:#e9dda9}.energy-nav-inner{position:relative;display:flex;align-items:stretch;max-width:1280px;min-height:84px;margin:auto}.energy-brand-shell{min-width:210px;margin:0;padding:0;list-style:none}.energy-brand-shell>li{height:100%}.energy-brand{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;padding:10px 18px;border-right:1px solid #6f765f;color:#173d32;text-decoration:none}.energy-brand b{font-size:18px;letter-spacing:.035em}.energy-brand span{font-size:11px}.energy-primary{display:flex;align-items:stretch;min-width:0;margin:0;padding:0;list-style:none}.energy-primary a,.energy-more-shell button{display:flex;align-items:center;min-height:48px;height:100%;padding:10px 13px;border:0;border-radius:0;background:transparent;color:#173d32;text-decoration:none;font-weight:800;white-space:nowrap}.energy-primary a:hover,.energy-more-shell button:hover{background:#e8c832;color:#161a17}.energy-today{display:grid;align-content:center;min-width:135px;margin-left:auto;padding:7px 14px;border-left:1px solid #6f765f}.energy-today span{font:10px "Courier New",monospace}.energy-today b{font:900 25px/1 "Courier New",monospace}.energy-today small{font-size:10px}.energy-more-shell{margin:0;padding:0;list-style:none}.energy-more-shell>li{position:relative;height:100%}.energy-more-shell button{border-left:1px solid #6f765f;cursor:pointer}.energy-more-shell button span{display:grid;place-items:center;min-width:24px;height:24px;margin-left:8px;border:1px solid #173d32;font:11px "Courier New",monospace}.energy-more-shell button[aria-expanded=true]{background:#173d32;color:#e9dda9}.energy-more-shell button[aria-expanded=true] span{border-color:#e9dda9}.energy-more-shell ul{position:absolute;z-index:5;right:0;top:100%;width:min(310px,calc(100vw - 20px));max-height:calc(100dvh - 94px);overflow:auto;margin:0;padding:8px;border:2px solid #173d32;background:#f3edcf;list-style:none}.energy-more-shell ul a{display:flex;align-items:center;min-height:48px;padding:9px 12px;border-bottom:1px solid #9c9c7d;color:#173d32;text-decoration:none;font-weight:800}.energy-more-shell ul li:last-child a{border-bottom:0}.energy-more-shell ul a:hover{background:#e8c832}.energy-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:end;min-height:530px;padding:55px max(22px,calc((100vw - 1160px)/2));background:#173d32;color:#f2ead0}.energy-hero p{margin:0;color:#e8c832;font:12px "Courier New",monospace}.energy-hero h1{margin:36px 0 0;font:900 clamp(68px,10vw,126px)/.76 "Trebuchet MS",Arial,sans-serif;letter-spacing:-.075em}.energy-hero dl{margin:0;border-top:1px solid #839887}.energy-hero dl div{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #839887}.energy-hero dt{font-size:13px}.energy-hero dd{margin:0;color:#e8c832;font:900 20px "Courier New",monospace}.energy-status{min-height:50px;margin:0;padding:14px max(22px,calc((100vw - 1160px)/2));border-bottom:1px solid #888c70;color:#173d32;font-weight:800}.energy-targets{display:none}.energy-page a:focus-visible,.energy-page button:focus-visible{outline:4px solid #161a17;outline-offset:-4px}@media(max-width:820px){.energy-nav-inner{min-height:72px}.energy-brand-shell{min-width:174px}.energy-brand span{display:none}.energy-today{display:none}.energy-primary a{padding:9px}.energy-hero{grid-template-columns:1fr;min-height:500px}.energy-hero h1{font-size:72px}}@media(max-width:520px){.energy-nav-inner{flex-wrap:wrap}.energy-brand-shell{flex:1;min-width:0}.energy-primary{order:3;width:100%;border-top:1px solid #6f765f}.energy-primary li{flex:1}.energy-primary a{justify-content:center;padding:6px;font-size:12px}.energy-more-shell{margin-left:auto}.energy-hero{padding-top:38px}.energy-hero h1{font-size:58px}}@media(max-height:400px){.energy-more-shell ul{max-height:270px}.energy-hero{min-height:330px;padding-top:30px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

$(function(){const $primary=$('#energy-primary'),$overflow=$('#energy-overflow'),$toggle=$('#energy-more-toggle'),original=$primary.children('[data-priority]').toArray();function close(focus){$overflow.prop('hidden',true);$toggle.attr('aria-expanded','false');if(focus)$toggle.trigger('focus')}function updateCount(){$('#energy-more-count').text($overflow.children('li').length)}function arrange(){close(false);original.sort((a,b)=>Number($(a).data('priority'))-Number($(b).data('priority'))).forEach(node=>$primary.append(node));let move=0;if(window.innerWidth<1000)move=2;if(window.innerWidth<700)move=4;original.slice(original.length-move).forEach(node=>$(node).insertBefore($overflow.children('[data-fixed-more]').first()));updateCount()}let timer;$(window).on('resize',function(){clearTimeout(timer);timer=setTimeout(arrange,60)});arrange();$toggle.on('click',function(){const opening=$toggle.attr('aria-expanded')!=='true';$overflow.prop('hidden',!opening);$toggle.attr('aria-expanded',String(opening));if(opening)$overflow.find('a').first().trigger('focus')});$('.energy-header').on('click','a',function(event){event.preventDefault();$(this).closest('nav').find('a[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page');$('#energy-status').text('Wybrano: '+$(this).text()+'.');if($(this).closest('#energy-overflow').length)close(true)});$(document).on('keydown',function(event){if(event.key==='Escape'&&$toggle.attr('aria-expanded')==='true'){event.preventDefault();close(true)}}).on('pointerdown',function(event){if($toggle.attr('aria-expanded')==='true'&&!$(event.target).closest('.energy-more-shell').length)close(false)});$('nav a[href^="#"]').on('click',function(event){event.preventDefault();const nav=$(this).closest('nav');nav.find('[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page')});});