Resizable master panel

[primozpadar]

• Make master panel resizable with mouse drag
• Store most recent width of the panel to the local storage

Example how this can be achieved with css variables:

  function handleMouseDown() {
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp, { once: true });
  }

  function handleMouseMove(e) {
    const width = Math.max(MIN_WIDTH, e.screenX);
    document.documentElement.style.setProperty("--editor-width", `${width}px`);
  }

  function handleMouseUp() {
    document.removeEventListener("mousemove", handleMouseMove);
  }

And add --editor-width to the css root

:root {
    --editor-width: 300px;
}