Okruszki nawigacyjne w przeglądarce plików

<main class="files"><header><h1>Archiwum<br>pracowni.</h1><span>Foldery / przykład</span></header><nav aria-label="Ścieżka folderu" id="breadcrumbs"><button data-depth="0" aria-current="page">Archiwum</button></nav><section id="folder-list" aria-label="Zawartość folderu"><button data-folder="projekty"><span class="folder" aria-hidden="true"></span><b>Projekty</b><small>2 foldery</small></button><button data-folder="materialy"><span class="folder" aria-hidden="true"></span><b>Materiały</b><small>2 pliki</small></button></section><p id="folder-status" class="status" aria-live="polite">Archiwum — 2 elementy</p></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:#e1e8e2;--ink:#294438;--focus:#8046a0}.files{max-width:770px;margin:auto;padding:34px}header{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:24px}h1{font:44px/1.05 Georgia,serif;margin:0}header>span{font:12px monospace}#breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:12px 0;border-top:1px solid #8dada0;border-bottom:1px solid #8dada0}#breadcrumbs button{border:0;background:transparent;color:#294438;padding:8px;font-size:14px}#breadcrumbs button[aria-current]{font-weight:700}#breadcrumbs span{color:#687e70}#folder-list{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:26px 0}#folder-list>button{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:20px;background:#f2f5ed;border:1px solid #bccac0;color:#294438}.folder{display:block;width:74px;height:49px;background:#79977a;position:relative;margin:15px 0 18px}.folder:before{content:'';position:absolute;top:-10px;left:0;width:31px;height:13px;background:#79977a}.file-icon{display:block;width:47px;height:59px;border:2px solid #8dada0;border-top:9px solid #8dada0;margin-bottom:18px}.file-icon:after{content:'';display:block;margin:12px 7px;height:18px;border-top:2px solid #8dada0;border-bottom:2px solid #8dada0}#folder-list b{font-size:20px}small{font-size:13px;margin-top:4px;color:#52685c}.status{font-size:13px;border-top:1px solid #8dada0;padding-top:12px}@media(max-width:480px){.files{padding:24px}h1{font-size:36px}header>span{max-width:80px;text-align:right}#folder-list{gap:12px}#folder-list>button{padding:15px}#folder-list b{font-size:16px}.folder{width:60px}}

(()=>{
const tree={name:'Archiwum',children:[{key:'projekty',name:'Projekty',children:[{key:'identyfikacja',name:'Identyfikacja',children:[{name:'Znaki.svg'},{name:'Kolory.pdf'}]},{key:'publikacje',name:'Publikacje',children:[{name:'Okładka.svg'},{name:'Makieta.pdf'}]}]},{key:'materialy',name:'Materiały',children:[{name:'Papier.pdf'},{name:'Próbki.svg'}]}]};let path=[tree];function render(){const current=path.at(-1),breadcrumbs=document.querySelector('#breadcrumbs'),list=document.querySelector('#folder-list');breadcrumbs.replaceChildren();path.forEach((node,i)=>{if(i){const sep=document.createElement('span');sep.textContent='/';sep.setAttribute('aria-hidden','true');breadcrumbs.append(sep);}const button=document.createElement('button');button.textContent=node.name;button.dataset.depth=i;if(i===path.length-1)button.setAttribute('aria-current','page');button.addEventListener('click',()=>{path=path.slice(0,i+1);render();});breadcrumbs.append(button);});list.replaceChildren();current.children.forEach(node=>{const button=document.createElement('button'),icon=document.createElement('span'),title=document.createElement('b'),detail=document.createElement('small');icon.className=node.children?'folder':'file-icon';icon.setAttribute('aria-hidden','true');title.textContent=node.name;detail.textContent=node.children?node.children.length+' elementy':'Plik demonstracyjny';button.append(icon,title,detail);if(node.children){button.dataset.folder=node.key;button.addEventListener('click',()=>{path.push(node);render();});}else button.addEventListener('click',()=>document.querySelector('#folder-status').textContent='Wybrano plik: '+node.name+'. To demonstracja bez pobierania.');list.append(button);});document.querySelector('#folder-status').textContent=current.name+' — '+current.children.length+' elementy';}render();
})();