Collapsible Icon Rail Sidebar

<div class="as"><aside class="sb"><div class="ws"><span class="lg">⌘</span><b class="tx">Acme Inc</b></div><a class="ni"><i>⌕</i><span class="tx">Search</span></a><a class="ni"><i>✦</i><span class="tx">AI Assistant</span></a><a class="ni"><i>✉</i><span class="tx">Inbox</span><u class="tx">4</u></a><small class="tx">WORKSPACES</small><a class="ni on"><i>◉</i><span class="tx">People</span></a><a class="ni"><i>▣</i><span class="tx">Companies</span></a><a class="ni"><i>◎</i><span class="tx">Opportunities</span></a></aside><main><div class="tb"><button class="tg" type="button">▤</button><b>People</b></div><div class="bd"><small>Wednesday, July 29</small><h3>Good morning, Ava.</h3><p>Your workspace stays in place while the navigation folds down to a focused icon rail.</p></div></main></div>

.as{display:flex;width:100%;height:100%;min-height:380px;font-family:system-ui,-apple-system,sans-serif;color:#eee;overflow:hidden}.sb{width:190px;flex:none;background:#141414;border-right:1px solid #222;padding:12px 10px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;transition:width .45s cubic-bezier(.3,1.1,.4,1);overflow:hidden}.as.c .sb{width:60px}.ws{display:flex;align-items:center;gap:10px;margin-bottom:12px;white-space:nowrap}.lg{width:28px;height:28px;border-radius:8px;background:#f2f2f2;color:#111;display:grid;place-items:center;flex:none}.ni{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;font-size:12px;color:#aaa;cursor:pointer;white-space:nowrap}.ni:hover{background:#1c1c1c}.ni.on{background:#222;color:#fff}.ni i{width:16px;text-align:center;font-style:normal;flex:none}.ni u{margin-left:auto;text-decoration:none;font-size:10px;color:#888}.tx{transition:opacity .25s}.as.c .tx{opacity:0}.sb small{font-size:9px;letter-spacing:.12em;color:#666;margin:14px 8px 4px;white-space:nowrap}main{flex:1;min-width:0}.tb{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #222;font-size:12px}.tg{background:none;border:0;color:#aaa;font-size:15px;cursor:pointer}.bd{padding:22px 20px}.bd small{font-size:10px;color:#777}.bd h3{margin:6px 0;font-size:20px}.bd p{margin:0;font-size:12px;color:#888;line-height:1.6;max-width:280px}

(function(){var R=document.querySelector(".as");R.querySelector(".tg").onclick=function(){R.classList.toggle("c")};[].forEach.call(R.querySelectorAll(".ni"),function(n){n.onclick=function(){[].forEach.call(R.querySelectorAll(".ni"),function(x){x.classList.remove("on")});n.classList.add("on");R.querySelector(".tb b").textContent=n.querySelector("span").textContent}})})();