햄버거 메뉴

<div class="hmw">
  <button class="ham" id="ham" aria-label="메뉴 열기" aria-expanded="false"><i></i><i></i><i></i></button>
  <div class="peek" id="peek"><span>알림</span><span>설정</span><span>계정</span></div>
</div>

.hmw{position:relative;width:100%;height:100%}
.ham{position:absolute;top:14px;left:14px;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.ham i{display:block;width:16px;height:2px;background:var(--fg);border-radius:1px;transition:transform .25s,opacity .2s}
.ham[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded=true] i:nth-child(2){opacity:0}
.ham[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.peek{position:absolute;top:0;right:0;bottom:0;width:min(120px,42%);background:var(--surface);border-left:1px solid var(--line);
  display:grid;gap:10px;align-content:start;padding:16px 12px;transform:translateX(100%);transition:transform .28s ease;font-size:11px;color:var(--fg)}
.peek[data-open]{transform:translateX(0)}

const ham = document.getElementById('ham'), peek = document.getElementById('peek');
function open(v) { ham.setAttribute('aria-expanded', String(v)); peek.toggleAttribute('data-open', v); }
let auto = true;
ham.addEventListener('click', () => { auto = false; open(ham.getAttribute('aria-expanded') !== 'true'); });
function loop() { if (!auto) return; open(ham.getAttribute('aria-expanded') !== 'true'); setTimeout(loop, 1600); }
setTimeout(loop, 900);