내비게이션 레일

<div class="nrw">
  <nav class="rail" aria-label="주요 메뉴" id="rail">
    <i class="rpill" id="rpill"></i>
    <button aria-current="page"><span>⌂</span></button>
    <button><span>⌕</span></button>
    <button><span>♡</span></button>
    <button><span>☺</span></button>
  </nav>
  <div class="rcontent"><div class="rbar" style="width:70%"></div><div class="rbar" style="width:44%"></div><div class="rbar" style="width:58%"></div></div>
</div>

.nrw{display:flex;width:100%;height:100%}
.rail{position:relative;width:48px;background:var(--surface);border-right:1px solid var(--line);display:grid;grid-auto-rows:40px;place-items:center;padding-top:10px;gap:6px}
.rail button{width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;position:relative;z-index:1}
.rail button[aria-current]{color:var(--accent)}
.rpill{position:absolute;top:10px;left:7px;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb, var(--accent) 16%, transparent);transition:transform .25s ease}
.rcontent{flex:1;padding:16px;display:grid;gap:9px;align-content:start}
.rbar{height:9px;border-radius:5px;background:var(--line)}

const btns = [...document.querySelectorAll('.rail button')];
const pill = document.getElementById('rpill');
function select(i) {
  btns.forEach((b, idx) => idx === i ? b.setAttribute('aria-current', 'page') : b.removeAttribute('aria-current'));
  pill.style.transform = 'translateY(' + (i * 40) + 'px)';
}
let auto = true, cur = 0;
select(0);
btns.forEach((b, i) => b.addEventListener('click', () => { auto = false; cur = i; select(i); }));
setInterval(() => { if (!auto) return; cur = (cur + 1) % btns.length; select(cur); }, 1500);