Workspace Switcher Menu

<div class='ws'><button type='button' id='wsb'><span class='ws-i' id='wsi'>A</span><span class='ws-n'><b id='wsn'>App UI</b><small id='wsp'>Pro plan</small></span><svg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4M8 15l4 4 4-4'/></svg></button><ul id='wsl' role='listbox'></ul></div>

.ws{position:relative;width:240px;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ws>button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;text-align:left;font:inherit;background:#fff;border:1px solid #ececec;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}.ws-i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#f4f4f4;font:700 13px Inter,Arial,sans-serif}.ws-n{flex:1}.ws-n b{display:block;font-size:14.5px;font-weight:500}.ws-n small{display:block;font-size:12.5px;color:#8a8a8a}.ws>button svg{color:#8a8a8a}.ws ul{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;margin:6px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.ws.open ul{display:block;animation:ws-in .15s ease}.ws li{display:flex;align-items:center;gap:10px;padding:8px;font-size:14px;border-radius:9px;cursor:pointer}.ws li:hover{background:#f4f4f4}.ws li span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#f4f4f4;font:700 11px Inter,Arial,sans-serif}.ws li.on{font-weight:600}@keyframes ws-in{from{opacity:0;transform:translateY(-4px)}}

const r=document.querySelector('.ws'),l=document.getElementById('wsl');const W=[['App UI','Pro plan'],['Marketing Site','Team plan'],['Side Project','Free plan']];let c=0;const d=()=>{l.innerHTML=W.map((w,i)=>'<li role=option class="'+(i===c?'on':'')+'"><span>'+w[0][0]+'</span>'+w[0]+'</li>').join('')};d();document.getElementById('wsb').addEventListener('click',()=>r.classList.toggle('open'));l.addEventListener('click',e=>{const i=[...l.children].indexOf(e.target.closest('li'));if(i>-1){c=i;document.getElementById('wsi').textContent=W[i][0][0];document.getElementById('wsn').textContent=W[i][0];document.getElementById('wsp').textContent=W[i][1];d();r.classList.remove('open')}});document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});