Mobilne menu kursu językowego

<div data-nav-kind="mobile">
<main class="lesson-app">
  <header><span>Kurs hiszpańskiego / A1</span><h1>Dobry wieczór,<br>Ola.</h1><button id="lesson-open" type="button" aria-haspopup="dialog" aria-controls="lesson-dialog" aria-expanded="false">Spis lekcji</button></header>
  <section id="lesson-greetings"><b>Lekcja 1</b><h2>Pierwsze powitania</h2><p>Zwroty na początek rozmowy.</p></section>
  <section id="lesson-cafe"><b>Lekcja 2</b><h2>Przy stoliku</h2><p>Zamówienie i uprzejme pytania.</p></section>
  <section id="lesson-city"><b>Lekcja 3</b><h2>Droga przez miasto</h2><p>Kierunki i punkty orientacyjne.</p></section>
  <section id="lesson-family"><b>Lekcja 4</b><h2>Rodzina i znajomi</h2><p>Osoby, relacje i krótkie opisy.</p></section>
  <section id="lesson-past"><b>Lekcja 5</b><h2>Wczoraj</h2><p>Pierwsze zdania o przeszłości.</p></section>
  <section id="lesson-plans"><b>Lekcja 6</b><h2>Plany na weekend</h2><p>Propozycje i umawianie spotkań.</p></section>
  <p id="lesson-status" aria-live="polite" role="status">Wybrana lekcja: Pierwsze powitania.</p>
</main>
<dialog id="lesson-dialog" aria-labelledby="lesson-title" aria-describedby="lesson-desc">
  <header><button id="lesson-back" type="button">← Wstecz</button><button class="lesson-close" type="button" aria-label="Zamknij spis lekcji">×</button></header>
  <div class="lesson-intro"><span>Hiszpański / A1–A2</span><h2 id="lesson-title" tabindex="-1">Spis lekcji</h2><p id="lesson-desc">Rozwiń rozdział, a następnie wybierz lekcję.</p></div>
  <nav aria-label="Rozdziały i lekcje kursu"><ul class="course-list">
    <li><button class="course-toggle" type="button" aria-expanded="false" aria-controls="course-start">Początek rozmowy <b>01–03</b></button><ul id="course-start" hidden>
      <li><a href="#lesson-greetings" data-lesson-name="Pierwsze powitania" aria-current="page">Pierwsze powitania</a></li>
      <li><a href="#lesson-cafe" data-lesson-name="Przy stoliku">Przy stoliku</a></li>
      <li><a href="#lesson-city" data-lesson-name="Droga przez miasto">Droga przez miasto</a></li>
    </ul></li>
    <li><button class="course-toggle" type="button" aria-expanded="false" aria-controls="course-life">Codzienne historie <b>04–06</b></button><ul id="course-life" hidden>
      <li><a href="#lesson-family" data-lesson-name="Rodzina i znajomi">Rodzina i znajomi</a></li>
      <li><a href="#lesson-past" data-lesson-name="Wczoraj">Wczoraj</a></li>
      <li><a href="#lesson-plans" data-lesson-name="Plany na weekend">Plany na weekend</a></li>
    </ul></li>
  </ul></nav>
</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:#d8d3c3;color:#252727;font:16px/1.5 Arial,sans-serif}.lesson-app{width:min(100%,430px);min-height:100dvh;margin:auto;background:#fff5d8;border-inline:1px solid #767465}.lesson-app>header{padding:22px 18px;border-left:10px solid #b13743;border-bottom:2px solid #252727}.lesson-app header span{color:#315c9b;font-weight:800}.lesson-app h1{margin:18px 0 23px;font:700 45px/.95 Georgia,serif}.lesson-app button,dialog button,dialog a{min-height:44px}.lesson-app>header button{border:2px solid #315c9b;background:#315c9b;color:#fff5d8;padding:9px 16px;font-weight:800;cursor:pointer}.lesson-app section{min-height:104px;padding:17px 18px;border-bottom:1px solid #918d78}.lesson-app section b{color:#b13743;font-size:12px}.lesson-app section h2{margin:4px 0;font:700 22px Georgia,serif}.lesson-app section p{margin:0;color:#58594f}.lesson-app>p{min-height:50px;margin:0;padding:13px 18px;background:#315c9b;color:#fff5d8}dialog{display:none;width:min(100%,430px);height:100dvh;max-height:none;margin:auto;padding:0;background:#fff5d8;color:#252727;border:0;border-inline:1px solid #252727;overflow-y:auto}dialog[open]{display:block;animation:lesson-in .18s ease-out}dialog::backdrop{background:#252727}dialog>header{position:sticky;z-index:2;top:0;display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:2px solid #252727;background:#fff5d8}dialog>header button{border:1px solid #252727;background:transparent;color:#252727;padding:7px 12px;font-weight:800;cursor:pointer}.lesson-close{width:46px;padding:0;font-size:25px}.lesson-intro{padding:20px 18px 15px;border-left:10px solid #b13743}.lesson-intro span{color:#315c9b;font-weight:800}.lesson-intro h2{margin:11px 0 4px;font:700 40px/.95 Georgia,serif}.lesson-intro p{margin:8px 0 0}.course-list,nav ul{list-style:none;margin:0;padding:0}.course-list>li{border-top:2px solid #252727}.course-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 18px;border:0;background:#fff5d8;color:#252727;text-align:left;font:800 18px Arial,sans-serif;cursor:pointer}.course-toggle[aria-expanded=true]{background:#315c9b;color:#fff5d8}.course-toggle b{font:12px "Courier New",monospace}.course-list ul li{border-top:1px solid #918d78}.course-list a{display:flex;align-items:center;padding:10px 30px;color:#252727;text-decoration:none;background:#f0e7c9}.course-list a:before{content:"—";margin-right:12px;color:#b13743;font-weight:900}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:4px solid #d6672f;outline-offset:3px}@keyframes lesson-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media(max-width:470px){.lesson-app{border:0}dialog{border:0}}@media(max-height:400px){.lesson-intro{padding-block:10px}.lesson-intro h2{font-size:32px;margin-top:5px}.lesson-intro p{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(()=>{const dialog=$('#lesson-dialog')[0],$dialog=$(dialog),opener=$('#lesson-open')[0];let active=null;const focusable=()=>[...dialog.querySelectorAll('button:not([disabled]),a[href]:not([tabindex="-1"]),[tabindex]:not([tabindex="-1"])')].filter(el=>el.getClientRects().length);function collapse(){if(!active)return false;$(active).attr('aria-expanded','false');$('#'+active.getAttribute('aria-controls')).prop('hidden',true);active.focus();active=null;return true}function close(){if(dialog.open)dialog.close('close')}$('#lesson-open').on('click',()=>{$(opener).attr('aria-expanded','true');$('.course-toggle').attr('aria-expanded','false').each(function(){$('#'+this.getAttribute('aria-controls')).prop('hidden',true)});active=null;dialog.showModal();$('#lesson-title').trigger('focus')});$('.course-toggle').on('click',function(){const opening=$(this).attr('aria-expanded')!=='true';if(active&&active!==this){$(active).attr('aria-expanded','false');$('#'+active.getAttribute('aria-controls')).prop('hidden',true)}$(this).attr('aria-expanded',String(opening));$('#'+this.getAttribute('aria-controls')).prop('hidden',!opening);active=opening?this:null;if(opening)$('#'+this.getAttribute('aria-controls')+' a').first().trigger('focus')});$('#lesson-back').on('click',()=>{if(!collapse())close()});$('[data-lesson-name]').on('click',function(){$('#lesson-status').text('Wybrana lekcja: '+$(this).data('lesson-name')+'.');close()});$('.lesson-close').on('click',close);$dialog.on('cancel',event=>{event.preventDefault();if(!collapse())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')});});