Panel boczny z przełączaniem sal muzeum

<main class="museum"><aside id="sidebar"><div class="museum-name"><b>M</b><span>Muzeum formy</span></div><button id="collapse" aria-expanded="true" aria-label="Zwiń opisy nawigacji">☰ <span>Zwiń menu</span></button><nav aria-label="Sale muzeum"><button data-room="ceramika" aria-current="page"><i aria-hidden="true">01</i><span>Ceramika</span></button><button data-room="szklo"><i aria-hidden="true">02</i><span>Szkło</span></button><button data-room="tkanina"><i aria-hidden="true">03</i><span>Tkanina</span></button><button data-room="papier"><i aria-hidden="true">04</i><span>Papier</span></button></nav></aside><section><p class="location">Parter / wystawa przykładowa</p><h1 id="room-title">Sala ceramiki</h1><p id="room-description">Wystawa przedmiotów ceramicznych.</p><svg viewBox="0 0 420 250" aria-label="Schemat czterech sal" role="img"><path d="M15 15H405V235H15Z" fill="#faf3e8" stroke="#694b44" stroke-width="3"/><path d="M210 15V235M15 125H405" stroke="#694b44" stroke-width="3"/><rect class="room-mark" id="mark-ceramika" x="30" y="30" width="165" height="80" fill="#a84739"/><rect class="room-mark" id="mark-szklo" x="225" y="30" width="165" height="80" fill="#e8d8c3"/><rect class="room-mark" id="mark-tkanina" x="30" y="140" width="165" height="80" fill="#e8d8c3"/><rect class="room-mark" id="mark-papier" x="225" y="140" width="165" height="80" fill="#e8d8c3"/><g fill="#faf3e8" font-family="Arial" font-size="22"><text x="45" y="78">01</text><text x="240" y="78" fill="#694b44">02</text><text x="45" y="188" fill="#694b44">03</text><text x="240" y="188" fill="#694b44">04</text></g></svg><p id="room-status" class="status" aria-live="polite">Wybrano salę 01</p></section></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#e9dbcb;--ink:#563a34;--focus:#176780}.museum{display:grid;grid-template-columns:220px 1fr;max-width:930px;margin:auto;min-height:100vh}aside{background:#a84739;color:#fff6ee;padding:25px 18px}.museum-name{display:flex;gap:12px;align-items:center;font-size:16px;white-space:nowrap}.museum-name b{font:46px Georgia,serif}.museum-name span{max-width:95px;white-space:normal;line-height:1.2}aside button{background:none;color:inherit;border:0;display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:12px 8px;font-size:15px}#collapse{margin:22px 0 18px;border-top:1px solid #d29185;border-bottom:1px solid #d29185}nav button[aria-current]{background:#833529}nav i{font:13px monospace;font-style:normal}section{padding:30px 38px}.location{font-size:12px}h1{font-family:Georgia,serif;font-size:42px;line-height:1.1;margin-bottom:12px}#room-description{font-size:14px;max-width:360px;min-height:42px}section svg{max-height:245px;width:100%;margin-top:15px}.status{font-size:13px;margin:8px 0 0}.museum.collapsed{grid-template-columns:76px 1fr}.collapsed aside{padding:25px 10px}.collapsed aside span{display:none}.collapsed .museum-name{justify-content:center}.collapsed aside button{justify-content:center}.collapsed #collapse{font-size:20px}svg text{pointer-events:none}@media(max-width:500px){.museum{grid-template-columns:74px 1fr}aside{padding:24px 10px}aside span{display:none}.museum-name b{font-size:38px}.museum-name{justify-content:center}aside button{justify-content:center;padding:12px 5px}section{padding:24px 20px}h1{font-size:32px}#room-description{min-height:0}section svg{margin-top:25px}.museum.collapsed{grid-template-columns:74px 1fr}}

(()=>{
const rooms={ceramika:['Sala ceramiki','Wystawa przedmiotów ceramicznych.','01'],szklo:['Sala szkła','Wystawa przedmiotów ze szkła.','02'],tkanina:['Sala tkaniny','Wystawa tkanin i splotów.','03'],papier:['Sala papieru','Wystawa konstrukcji z papieru.','04']};document.querySelector('#collapse').addEventListener('click',e=>{const button=e.currentTarget,collapsed=document.querySelector('.museum').classList.toggle('collapsed');button.setAttribute('aria-expanded',String(!collapsed));button.setAttribute('aria-label',collapsed?'Rozwiń opisy nawigacji':'Zwiń opisy nawigacji');button.querySelector('span').textContent=collapsed?'Rozwiń menu':'Zwiń menu';});document.querySelectorAll('[data-room]').forEach(button=>{button.setAttribute('aria-label',rooms[button.dataset.room][0]);button.addEventListener('click',()=>{document.querySelectorAll('[data-room]').forEach(b=>b.removeAttribute('aria-current'));button.setAttribute('aria-current','page');const info=rooms[button.dataset.room];document.querySelector('#room-title').textContent=info[0];document.querySelector('#room-description').textContent=info[1];document.querySelector('#room-status').textContent='Wybrano salę '+info[2];document.querySelectorAll('.room-mark').forEach(rect=>rect.setAttribute('fill',rect.id==='mark-'+button.dataset.room?'#a84739':'#e8d8c3'));document.querySelectorAll('svg text').forEach((text,i)=>text.setAttribute('fill',i===Number(info[2])-1?'#faf3e8':'#694b44'));});});
})();