Mobilna listwa nawigacji kliniki

<div data-nav-kind="mobile">
<main class="clinic-app">
  <header><span>Przychodnia Południe</span><h1>Panel pacjenta</h1><p>Dzisiaj, poniedziałek 13 października.</p></header>
  <section id="clinic-home"><b>Start</b><p>Najbliższa wizyta: środa, 10:20.</p></section>
  <section id="clinic-visits"><b>Wizyty</b><p>Dwie zaplanowane konsultacje.</p></section>
  <section id="clinic-results"><b>Wyniki</b><p>Jeden nowy dokument do odczytu.</p></section>
  <section id="clinic-contact"><b>Kontakt</b><p>Rejestracja czynna do 18:00.</p></section>
  <p id="clinic-status" aria-live="polite" role="status">Bieżąca sekcja: Start.</p>
  <button id="clinic-toggle" type="button" aria-expanded="false" aria-controls="clinic-rail"><span aria-hidden="true">☰</span><b>Nawigacja</b></button>
  <aside id="clinic-rail" hidden>
    <header><span>Przychodnia</span><button id="clinic-back" type="button">← Wróć</button></header>
    <nav aria-label="Sekcje panelu pacjenta"><ul>
      <li><a href="#clinic-home" data-clinic-name="Start" aria-current="page"><b>01</b><span>Start</span></a></li>
      <li><a href="#clinic-visits" data-clinic-name="Wizyty"><b>02</b><span>Wizyty</span></a></li>
      <li><a href="#clinic-results" data-clinic-name="Wyniki"><b>03</b><span>Wyniki</span></a></li>
      <li><a href="#clinic-contact" data-clinic-name="Kontakt"><b>04</b><span>Kontakt</span></a></li>
    </ul></nav>
  </aside>
</main>
</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:#c8d2ca;color:#173c31;font:16px/1.5 Arial,sans-serif}.clinic-app{position:relative;width:min(100%,430px);min-height:100dvh;margin:auto;padding-bottom:72px;background:#eef3ed;border-inline:1px solid #799287;overflow:hidden}.clinic-app>header{padding:24px 18px;border-bottom:6px solid #135b47}.clinic-app header span{color:#b13e34;font-weight:800}.clinic-app h1{margin:8px 0 4px;font:700 38px/1 Georgia,serif}.clinic-app header p{margin:10px 0 0}.clinic-app section{min-height:112px;padding:19px 18px;border-bottom:1px solid #799287}.clinic-app section b{font:700 23px Georgia,serif}.clinic-app section p{margin:8px 0 0;color:#47675d}.clinic-app>p{min-height:49px;margin:0;padding:13px 18px;background:#135b47;color:#fff}.clinic-app button,.clinic-app a{min-height:44px}#clinic-toggle{position:fixed;z-index:3;left:50%;bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:10px;width:min(calc(100% - 24px),406px);transform:translateX(-50%);border:2px solid #173c31;background:#f1b84a;color:#173c31;padding:9px 15px;cursor:pointer}#clinic-toggle span{font-size:20px}#clinic-rail{position:fixed;z-index:4;right:max(0px,calc((100vw - 430px)/2));top:0;width:min(78vw,260px);height:100dvh;background:#135b47;color:#fff;overflow-y:auto;border-left:5px solid #f1b84a;animation:clinic-in .18s ease-out}#clinic-rail>header{padding:14px;border-bottom:1px solid #78a899}#clinic-rail>header span{display:block;margin-bottom:8px;color:#bee0d5;font:12px "Courier New",monospace}#clinic-back{width:100%;border:1px solid #fff;background:transparent;color:#fff;padding:8px 12px;text-align:left;font-weight:800;cursor:pointer}nav ul{list-style:none;margin:0;padding:0}nav li{border-bottom:1px solid #78a899}nav a{display:grid;grid-template-columns:42px 1fr;align-items:center;padding:10px 14px;color:#fff;text-decoration:none}nav a b{font:13px "Courier New",monospace;color:#bee0d5}nav a span{font-size:19px;font-weight:800}nav a[aria-current=page]{background:#f1b84a;color:#173c31}nav a[aria-current=page] b{color:#173c31}button:focus-visible,a:focus-visible{outline:4px solid #e96358;outline-offset:3px}[hidden]{display:none!important}@keyframes clinic-in{from{transform:translateX(100%)}to{transform:none}}@media(max-width:470px){.clinic-app{border:0}#clinic-rail{right:0}}@media(max-height:400px){#clinic-rail>header{padding-block:8px}nav a{padding-block:7px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(()=>{const panel=$('#clinic-rail'),toggle=$('#clinic-toggle');function open(){panel.prop('hidden',false);toggle.attr('aria-expanded','true');panel.find('a').first().trigger('focus')}function close(){panel.prop('hidden',true);toggle.attr('aria-expanded','false').trigger('focus')}toggle.on('click',()=>panel.prop('hidden')?open():close());$('#clinic-back').on('click',close);$('[data-clinic-name]').on('click',function(){const name=$(this).data('clinic-name');$('[data-clinic-name]').removeAttr('aria-current');$(this).attr('aria-current','page');$('#clinic-status').text('Bieżąca sekcja: '+name+'.')});$(document).on('keydown',event=>{if(event.key==='Escape'&&!panel.prop('hidden')){event.preventDefault();close()}});$('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')});});