<div class="demo">
  <div class="app-shell" id="appShell">
    <aside class="sidebar" id="sidebar" style="width: 200px;">
      <div class="sidebar-brand">Workspace</div>
      <nav class="sidebar-nav">
        <a href="#" class="sidebar-link active">Dashboard</a>
        <a href="#" class="sidebar-link">Projects</a>
        <a href="#" class="sidebar-link">Team</a>
        <a href="#" class="sidebar-link">Settings</a>
      </nav>
    </aside>
    <div class="resize-handle" id="resizeHandle" role="separator" aria-orientation="vertical" aria-label="Resize sidebar" tabindex="0"></div>
    <main class="app-content">
      <h3>Main content</h3>
      <p>Drag the divider to resize the sidebar. Reload the preview and the width you set is restored from localStorage — try the keyboard too: focus the divider and press Arrow Left/Right.</p>
    </main>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 520px; max-width: 100%; }

.app-shell { display: flex; height: 320px; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; background: #fff; }

.sidebar { flex-shrink: 0; background: #f8fafc; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; min-width: 140px; max-width: 340px; }
.sidebar-brand { padding: 16px 18px; font-size: 13px; font-weight: 800; color: #111827; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.sidebar-nav { display: flex; flex-direction: column; padding: 10px; gap: 2px; }
.sidebar-link { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #64748b; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-link:hover { background: #f1f5f9; color: #334155; }
.sidebar-link.active { background: #eef2ff; color: #4338ca; }

.resize-handle { flex-shrink: 0; width: 6px; cursor: col-resize; background: transparent; position: relative; }
.resize-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; border-radius: 2px; background: #e2e8f0; transition: background 0.15s; }
.resize-handle:hover::after, .resize-handle.active::after { background: #6366f1; }
.resize-handle:focus-visible { outline: none; }
.resize-handle:focus-visible::after { background: #6366f1; width: 3px; }

.app-content { flex: 1; padding: 22px; overflow: auto; }
.app-content h3 { font-size: 14.5px; font-weight: 800; color: #111827; margin-bottom: 8px; }
.app-content p { font-size: 12.5px; color: #64748b; line-height: 1.7; }

const sidebar = document.getElementById('sidebar');
const handle = document.getElementById('resizeHandle');

const STORAGE_KEY = 'sidebar-width';
const MIN_WIDTH = 140;
const MAX_WIDTH = 340;
const KEYBOARD_STEP = 16;

function clamp(width) {
  return Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, width));
}

function setWidth(width) {
  const clamped = clamp(width);
  sidebar.style.width = clamped + 'px';
  handle.setAttribute('aria-valuenow', String(Math.round(clamped)));
  return clamped;
}

function persistWidth(width) {
  try {
    // Persisting on every pointerup (not on every pointermove) avoids
    // hammering localStorage dozens of times during a single drag gesture —
    // only the FINAL settled width after a resize actually needs saving.
    localStorage.setItem(STORAGE_KEY, String(width));
  } catch (err) {
    /* storage unavailable — resizing still works for this session */
  }
}

function loadPersistedWidth() {
  try {
    const stored = parseFloat(localStorage.getItem(STORAGE_KEY));
    return isNaN(stored) ? null : stored;
  } catch (err) {
    return null;
  }
}

handle.setAttribute('aria-valuemin', String(MIN_WIDTH));
handle.setAttribute('aria-valuemax', String(MAX_WIDTH));

// --- Pointer drag resizing ---
let dragStartX = null;
let dragStartWidth = null;

handle.addEventListener('pointerdown', (e) => {
  dragStartX = e.clientX;
  dragStartWidth = sidebar.getBoundingClientRect().width;
  handle.classList.add('active');
  handle.setPointerCapture(e.pointerId);
  document.body.style.userSelect = 'none'; // prevent accidental text selection while dragging
});

handle.addEventListener('pointermove', (e) => {
  if (dragStartX === null) return;
  const delta = e.clientX - dragStartX;
  setWidth(dragStartWidth + delta);
});

handle.addEventListener('pointerup', () => {
  if (dragStartX === null) return;
  dragStartX = null;
  handle.classList.remove('active');
  document.body.style.userSelect = '';
  persistWidth(sidebar.getBoundingClientRect().width);
});

// --- Keyboard resizing, for users who can't (or don't want to) drag ---
handle.addEventListener('keydown', (e) => {
  const current = sidebar.getBoundingClientRect().width;
  if (e.key === 'ArrowRight') {
    e.preventDefault();
    persistWidth(setWidth(current + KEYBOARD_STEP));
  } else if (e.key === 'ArrowLeft') {
    e.preventDefault();
    persistWidth(setWidth(current - KEYBOARD_STEP));
  } else if (e.key === 'Home') {
    e.preventDefault();
    persistWidth(setWidth(MIN_WIDTH));
  } else if (e.key === 'End') {
    e.preventDefault();
    persistWidth(setWidth(MAX_WIDTH));
  }
});

// Restore a previously persisted width on load, falling back to the width
// already set inline in the markup if nothing (valid) was stored yet.
const persisted = loadPersistedWidth();
if (persisted !== null) setWidth(persisted);
else setWidth(sidebar.getBoundingClientRect().width);