Mobilna szuflada serwisu rowerowego

<div data-nav-kind="mobile">
<main class="bike-app">
  <header class="bike-head"><div><span>Warsztat 28</span><h1>Twój rower</h1></div><button id="bike-open" type="button" aria-haspopup="dialog" aria-controls="bike-drawer" aria-expanded="false">Przejdź do…</button></header>
  <section id="bike-home" class="bike-hero"><p>Rower miejski / numer 184</p><h2>Przegląd przed sezonem</h2><div class="bike-frame" aria-hidden="true"><i></i><b></b><em></em></div></section>
  <section id="bike-service" class="bike-card"><b>Serwis</b><span>Wybierz zakres prac z bocznej szuflady.</span></section>
  <section id="bike-brakes" class="bike-card"><b>Hamulce</b><span>Kontrola klocków i linek.</span></section>
  <section id="bike-drive" class="bike-card"><b>Napęd</b><span>Łańcuch, kaseta i regulacja.</span></section>
  <section id="bike-wheels" class="bike-card"><b>Koła</b><span>Centrowanie i kontrola opon.</span></section>
  <section id="bike-parts" class="bike-card"><b>Części</b><span>Dostępne elementy zamienne.</span></section>
  <section id="bike-account" class="bike-card"><b>Karta roweru</b><span>Historia wykonanych prac.</span></section>
  <p id="bike-status" class="bike-status" aria-live="polite" role="status">Jesteś na stronie przeglądu.</p>
</main>
<dialog id="bike-drawer" aria-labelledby="bike-drawer-title" aria-describedby="bike-drawer-desc">
  <header><div><small>Warsztat 28</small><h2 id="bike-drawer-title" tabindex="-1">Nawigacja warsztatu</h2><p id="bike-drawer-desc">Wybierz dział albo przejdź głębiej do usług serwisowych.</p></div><button class="bike-close" type="button" aria-label="Zamknij nawigację">×</button></header>
  <div class="bike-levels">
    <section id="bike-root-level" class="bike-level">
      <nav aria-label="Główne działy warsztatu"><ul>
        <li><a href="#bike-service" data-bike-next="bike-service-level" aria-current="page"><span>Serwis</span><small>Trzy zakresy prac</small></a></li>
        <li><a href="#bike-parts" data-bike-destination="Części"><span>Części</span><small>Elementy zamienne</small></a></li>
        <li><a href="#bike-account" data-bike-destination="Karta roweru"><span>Karta roweru</span><small>Historia napraw</small></a></li>
      </ul></nav>
    </section>
    <section id="bike-service-level" class="bike-level" hidden>
      <button id="bike-back" class="bike-back" type="button">← Wróć do działów</button>
      <nav aria-label="Usługi serwisowe"><ul>
        <li><a href="#bike-brakes" data-bike-destination="Hamulce" aria-current="page"><span>Hamulce</span><small>Klocki i linki</small></a></li>
        <li><a href="#bike-drive" data-bike-destination="Napęd"><span>Napęd</span><small>Łańcuch i kaseta</small></a></li>
        <li><a href="#bike-wheels" data-bike-destination="Koła"><span>Koła</span><small>Obręcze i opony</small></a></li>
      </ul></nav>
    </section>
  </div>
</dialog>
</div>

*{box-sizing:border-box}[data-nav-kind="mobile"]{width:min(100%,430px);margin:auto}html{color-scheme:light}body{margin:0;min-width:0;background:#d8d0b8;color:#102f36;font:16px/1.5 Arial,sans-serif}.bike-app{width:min(100%,430px);min-height:100dvh;margin:auto;background:#efe6cb;border-inline:1px solid #49666b}.bike-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;border-bottom:5px solid #102f36}.bike-head span{font:12px "Courier New",monospace}.bike-head h1{margin:3px 0 0;font-size:33px;line-height:1}.bike-head button,.bike-app button,.bike-app a,dialog button,dialog a{min-height:44px}.bike-head button{border:2px solid #102f36;background:#f5764c;color:#102f36;padding:8px 12px;font:700 14px Arial,sans-serif;cursor:pointer}.bike-hero{position:relative;min-height:235px;padding:24px 18px;border-bottom:1px solid #49666b;overflow:hidden}.bike-hero p{margin:0;color:#49666b;font:12px "Courier New",monospace}.bike-hero h2{position:relative;z-index:2;width:68%;margin:13px 0 0;font-size:40px;line-height:.95;letter-spacing:-.04em}.bike-frame{position:absolute;right:15px;bottom:22px;width:170px;height:100px;border:8px solid #167083;transform:skewX(-18deg)}.bike-frame:before,.bike-frame:after{content:"";position:absolute;bottom:-20px;width:54px;height:54px;border:8px solid #102f36;border-radius:50%}.bike-frame:before{left:-25px}.bike-frame:after{right:-25px}.bike-frame i{position:absolute;left:47px;top:-31px;width:55px;border-top:8px solid #f5764c}.bike-frame b{position:absolute;left:80px;top:-11px;height:91px;border-left:8px solid #167083;transform:rotate(42deg)}.bike-card{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px;padding:13px 18px;border-bottom:1px solid #9c9278}.bike-card b{font-size:18px}.bike-card span{max-width:210px;color:#49666b;font-size:13px;text-align:right}.bike-status{min-height:48px;margin:0;padding:13px 18px;background:#102f36;color:#f5edda}dialog{display:none;width:min(92vw,390px);height:100dvh;max-height:none;margin:0 0 0 auto;padding:0;border:0;border-left:5px solid #f5764c;background:#123f49;color:#f5edda;overflow:hidden}dialog[open]{display:flex;flex-direction:column;animation:bike-in .22s ease-out}dialog::backdrop{background:rgba(7,23,27,.78)}dialog>header{display:flex;justify-content:space-between;gap:14px;padding:20px 16px;border-bottom:1px solid #729097}dialog small{color:#a9c2c5;font:11px "Courier New",monospace}dialog h2{margin:5px 0;font-size:29px;line-height:1}dialog header p{margin:7px 0 0;color:#c9dbdc;font-size:13px}.bike-close{width:46px;padding:0;border:1px solid #f5edda;background:transparent;color:#f5edda;font-size:25px;cursor:pointer}.bike-levels{min-height:0;overflow-y:auto}.bike-level{padding:14px 16px 22px}nav ul{list-style:none;margin:0;padding:0}nav li{border-bottom:1px solid #729097}nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 4px;color:#f5edda;text-decoration:none}nav a span{font-size:21px;font-weight:800}nav a small{max-width:130px;text-align:right}.bike-back{width:100%;margin-bottom:12px;padding:8px 10px;border:1px solid #f5764c;background:#f5764c;color:#102f36;text-align:left;font-weight:800;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:4px solid #ffd45c;outline-offset:3px}@keyframes bike-in{from{transform:translateX(100%)}to{transform:none}}@media(max-width:470px){.bike-app{border:0}dialog{width:100vw}}@media(max-height:400px){dialog>header{padding-block:10px}.bike-level{padding-top:8px}.bike-hero{min-height:190px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(()=>{const dialog=$('#bike-drawer')[0],$dialog=$(dialog),opener=$('#bike-open')[0];const focusable=()=>[...dialog.querySelectorAll('button:not([disabled]),a[href]:not([tabindex="-1"]),[tabindex]:not([tabindex="-1"])')].filter(el=>el.getClientRects().length);function level(id,focus=true){$('.bike-level').prop('hidden',true);$('#'+id).prop('hidden',false);if(focus)(id==='bike-root-level'?$('#bike-root-level a').first():$('#bike-back')).trigger('focus')}function close(){if(dialog.open)dialog.close('close')}$('#bike-open').on('click',()=>{level('bike-root-level',false);$(opener).attr('aria-expanded','true');dialog.showModal();$('#bike-drawer-title').trigger('focus')});$('[data-bike-next]').on('click',function(event){event.preventDefault();level($(this).data('bike-next'))});$('#bike-back').on('click',()=>level('bike-root-level'));$('[data-bike-destination]').on('click',function(){const name=$(this).data('bike-destination');$('#bike-status').text('Wybrano: '+name+'.');close()});$('.bike-close').on('click',close);$dialog.on('cancel',event=>{event.preventDefault();close()}).on('close',()=>{$(opener).attr('aria-expanded','false');opener.focus()}).on('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close();return}if(event.key!=='Tab')return;const items=focusable(),first=items[0],last=items[items.length-1];if(!items.length){event.preventDefault();dialog.focus()}else if(event.shiftKey&&items.indexOf(document.activeElement)<=0){event.preventDefault();last.focus()}else if(!event.shiftKey&&(items.indexOf(document.activeElement)<0||document.activeElement===last)){event.preventDefault();first.focus()}});$('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')});});