오프캔버스

<div class="phone">
  <header>☰ &nbsp; App</header>
  <div class="content"><i class="ln"></i><i class="ln"></i><i class="ln"></i></div>
  <div class="scrim show" id="scrim"></div>
  <div class="drawer show" id="drawer">
    <b>Menu</b>
    <i class="item"></i><i class="item"></i><i class="item"></i><i class="item"></i>
  </div>
</div>

.phone{position:relative;width:min(64%,230px);height:min(92%,300px);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12);background:var(--bg)}
header{background:var(--surface);border-bottom:1px solid var(--line);padding:12px;font-size:12px;font-weight:700}
.content{padding:16px;display:flex;flex-direction:column;gap:12px}
.content .ln{display:block;height:12px;border-radius:4px;background:var(--surface);border:1px solid var(--line)}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.show{opacity:1}
.drawer{position:absolute;top:0;bottom:0;left:0;width:68%;background:var(--surface);border-right:1px solid var(--line);
  transform:translateX(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);padding:16px;display:flex;flex-direction:column;gap:10px}
.drawer.show{transform:translateX(0)}
.drawer b{font-size:12px}
.item{display:block;height:10px;border-radius:3px;background:var(--line);width:70%}

const drawer = document.getElementById('drawer');
const scrim = document.getElementById('scrim');
setInterval(() => {
  drawer.classList.toggle('show');
  scrim.classList.toggle('show');
}, 2200);