Drag to Reveal Side Panel — Free Edge-Drag JS Snippet

<div class="drp-stage" id="drpStage">
  <div class="drp-content">
    <h2>Main content</h2>
    <p>Grab the tab on the left edge and drag it inward to reveal the panel. It follows your drag distance live \u2014 release partway and it snaps fully open or fully closed.</p>
  </div>

  <div class="drp-panel" id="drpPanel">
    <h3>Side panel</h3>
    <p>Navigation, filters, or settings live here. Drag the handle back toward the edge to close it, or drag it inward again to fully open.</p>
    <ul>
      <li>Dashboard</li>
      <li>Projects</li>
      <li>Settings</li>
    </ul>
  </div>

  <button type="button" class="drp-handle" id="drpHandle" aria-label="Drag to reveal panel">
    <span class="drp-grip"></span>
  </button>

  <div class="drp-scrim" id="drpScrim"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0d0f16;color:#e7e9f3}
.drp-stage{position:relative;width:100%;max-width:640px;height:400px;margin:26px auto;border-radius:16px;overflow:hidden;border:1px solid #232838;background:#12141f}

.drp-content{position:relative;z-index:1;height:100%;padding:32px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.drp-content h2{font-size:21px}
.drp-content p{font-size:13.5px;color:#9aa0ba;line-height:1.6;max-width:400px}

.drp-panel{position:absolute;top:0;left:0;width:250px;height:100%;background:#181c2c;border-right:1px solid #2a2f45;padding:26px 22px;transform:translateX(-100%);z-index:3;box-shadow:14px 0 30px -10px rgba(0,0,0,.5)}
.drp-panel h3{font-size:16px;margin-bottom:8px}
.drp-panel p{font-size:12.5px;color:#9299b8;line-height:1.55;margin-bottom:14px}
.drp-panel ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.drp-panel li{font-size:13px;font-weight:600;color:#c7cce3;background:#20253a;padding:9px 12px;border-radius:8px}

.drp-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;z-index:2;transition:opacity .1s linear}

.drp-handle{position:absolute;top:50%;left:0;width:22px;height:64px;margin-top:-32px;border:none;border-radius:0 10px 10px 0;background:#2a2f45;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;z-index:4;transition:background .15s}
.drp-handle:hover,.drp-handle.dragging{background:#3a4066}
.drp-handle.dragging{cursor:grabbing}
.drp-grip{width:3px;height:26px;border-radius:99px;background:#666e8f}
.drp-handle:hover .drp-grip,.drp-handle.dragging .drp-grip{background:#c7cce3}

var stage = document.getElementById('drpStage');
var panel = document.getElementById('drpPanel');
var handle = document.getElementById('drpHandle');
var scrim = document.getElementById('drpScrim');

var PANEL_WIDTH = 250;
var SNAP_THRESHOLD = 0.4; // fraction of panel width to decide open vs closed on release

var dragging = false;
var startX = 0;
var startOffset = 0; // -PANEL_WIDTH (closed) .. 0 (open), the panel's current translateX
var currentOffset = -PANEL_WIDTH;
var isOpen = false;

function applyOffset(offset, withTransition) {
  currentOffset = Math.min(0, Math.max(-PANEL_WIDTH, offset));
  panel.style.transition = withTransition ? 'transform .28s cubic-bezier(.2,.8,.3,1)' : 'none';
  panel.style.transform = 'translateX(' + currentOffset + 'px)';
  handle.style.transition = withTransition ? 'left .28s cubic-bezier(.2,.8,.3,1)' : 'none';
  handle.style.left = (currentOffset + PANEL_WIDTH) + 'px';
  var revealFraction = (currentOffset + PANEL_WIDTH) / PANEL_WIDTH; // 0..1
  scrim.style.opacity = revealFraction * 0.45;
  scrim.style.pointerEvents = revealFraction > 0.05 ? 'auto' : 'none';
}

function settle(open) {
  isOpen = open;
  applyOffset(open ? 0 : -PANEL_WIDTH, true);
}

function pointerX(e) {
  return e.touches ? e.touches[0].clientX : e.clientX;
}

function onDragStart(e) {
  dragging = true;
  handle.classList.add('dragging');
  startX = pointerX(e);
  startOffset = currentOffset;
  e.preventDefault();
}

// The panel's reveal amount tracks the live drag distance \u2014 partial drags
// show a genuinely partial reveal, not a snapped toggle mid-gesture.
function onDragMove(e) {
  if (!dragging) return;
  var dx = pointerX(e) - startX;
  applyOffset(startOffset + dx, false);
}

function onDragEnd() {
  if (!dragging) return;
  dragging = false;
  handle.classList.remove('dragging');
  var revealFraction = (currentOffset + PANEL_WIDTH) / PANEL_WIDTH;
  settle(revealFraction > SNAP_THRESHOLD);
}

handle.addEventListener('mousedown', onDragStart);
handle.addEventListener('touchstart', onDragStart, { passive: false });
window.addEventListener('mousemove', onDragMove);
window.addEventListener('touchmove', onDragMove, { passive: false });
window.addEventListener('mouseup', onDragEnd);
window.addEventListener('touchend', onDragEnd);

scrim.addEventListener('click', function () { settle(false); });
handle.addEventListener('click', function (e) {
  // A quick tap (no meaningful drag) toggles the panel outright.
  if (Math.abs(currentOffset - startOffset) < 4) settle(!isOpen);
});

applyOffset(-PANEL_WIDTH, false);