Drawer

<div class="app-bg"><div class="bar" style="width:70%"></div><div class="bar" style="width:50%"></div><div class="bar" style="width:82%"></div></div>
<div class="scrim" id="sc"></div>
<aside class="drawer" id="dr" role="dialog" aria-modal="true" aria-label="설정">
  <h2>설정</h2>
  <nav><a href="#" tabindex="-1">알림</a><a href="#" tabindex="-1">개인정보</a><a href="#" tabindex="-1">계정</a></nav>
</aside>

.app-bg{position:absolute;inset:0;padding:16px;display:grid;gap:10px;align-content:start}
.bar{height:10px;border-radius:5px;background:var(--line)}
.scrim{position:absolute;inset:0;background:rgba(10,10,16,.42);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim[data-open]{opacity:1}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(190px,64%);background:var(--surface);box-shadow:-14px 0 30px rgba(0,0,0,.22);padding:18px 16px;transform:translateX(100%);transition:transform .28s ease;display:grid;gap:12px;align-content:start}
.drawer[data-open]{transform:translateX(0)}
.drawer h2{margin:0;font-size:14px}
.drawer nav{display:grid;gap:8px}
.drawer a{color:var(--fg);font-size:12px;text-decoration:none;padding:6px 8px;border-radius:6px;background:var(--bg)}

const dr = document.getElementById('dr'), sc = document.getElementById('sc');
let auto = true;
function open(v) { dr.toggleAttribute('data-open', v); sc.toggleAttribute('data-open', v); }
sc.addEventListener('click', () => { auto = false; open(false); });
function loop() { if (!auto) return; open(true); setTimeout(() => { if (auto) { open(false); setTimeout(loop, 1000); } }, 2200); }
open(true);
setTimeout(loop, 2200);