Bottom navigation

<div class="phone">
  <div class="pcontent"><div class="pbar" style="width:60%"></div><div class="pbar" style="width:82%"></div></div>
  <nav class="bn" aria-label="주요 메뉴" id="bn">
    <button aria-current="page"><i>⌂</i>홈</button>
    <button><i>⌕</i>검색</button>
    <button><i>♡</i>찜</button>
    <button><i>☺</i>마이</button>
  </nav>
</div>

.phone{width:min(190px,80%);height:100%;max-height:170px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.pcontent{flex:1;padding:14px;display:grid;gap:8px;align-content:start}
.pbar{height:8px;border-radius:4px;background:var(--line)}
.bn{display:flex;border-top:1px solid var(--line);background:var(--bg)}
.bn button{flex:1;border:0;background:none;display:grid;place-items:center;gap:2px;padding:8px 0;font-size:9px;color:var(--muted);cursor:pointer}
.bn button i{font-style:normal;font-size:15px}
.bn button[aria-current]{color:var(--accent)}

const btns = [...document.querySelectorAll('.bn button')];
let auto = true, i = 0;
btns.forEach((b, idx) => b.addEventListener('click', () => { auto = false; i = idx; btns.forEach((x, xi) => xi === idx ? x.setAttribute('aria-current', 'page') : x.removeAttribute('aria-current')); }));
setInterval(() => {
  if (!auto) return;
  i = (i + 1) % btns.length;
  btns.forEach((x, xi) => xi === i ? x.setAttribute('aria-current', 'page') : x.removeAttribute('aria-current'));
}, 1500);