dragable and responsive sidebar

Question

I'm looking for a template for a responsive, dragable (horizontal resizeable) sidebar. Optional based on bootstrap (I use bootstrap 4.6, but other version are fine), may make use of jQuery.

This for example fits my needs: https://bootsnipp.com/snippets/BDWlD

But's it not dragable, I've try to use some code for dragable divs. but they do not work because of the use of negative margins and some more to toogle sidebar in template above (and the most other respontive sidebar templates) (most all use negative margins to support css-animations).

One example, which didn't work: https://jsfiddle.net/RainStudios/mw786v1w/ , but I'd try a lot more

var element = document.getElementById('element');
var resizer = document.createElement('div');
resizer.className = 'resizer';
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
element.appendChild(resizer);
resizer.addEventListener('mousedown', initResize, false);

function initResize(e) {
   window.addEventListener('mousemove', Resize, false);
   window.addEventListener('mouseup', stopResize, false);
}
function Resize(e) {
   element.style.width = (e.clientX - element.offsetLeft) + 'px';
   element.style.height = (e.clientY - element.offsetTop) + 'px';
}
function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
}

So I look for a joined code from both or a other template for a dragable responsive sidebar. (If possible without big libaraies, because I still have to further develop the code.) I've google a lot but did not find a well solutions.

A more detailed description of the problem: The width of the sidebar (eg 250px) and a negative margin (-250px) with the same value is set in one class (in the example of the link from above #sidebar-wrapper). In a second class, the padding is set to 250px. If the second class is active, the sidebar is shown, otherwise it is hidden. To modify that dynamicly is tricky. To adjust this dynamically, I would have to adjust all three classes dynamically, which is possible but very cumbersome and ugly. Alternatively I would have to write the sidebar handling completely new in JS without classes (directly assigned values) incl. the responsive variants (from media queries). Also not nice. May there is a way to dynamicly compute the values in css??

Any idea? Some links are suffient, I do the rest. Or an idea to handle that CSS-stuff (must not be complete code)

(At the end should end up in a help page with a table of contents in the sidebar, a search with instant search via ajax and a load of the help content also via ajax in the main div. But I'm not worried about this part, I've built something like that before - but if I find something ready-made, I won't say no;-) )

Answer 1

Finaly I managed by myself:

Changes to above:

var wrapperElement = document.getElementById('wrapper');
...
function Resize(e) {
   element.style.width = (e.clientX - element.offsetLeft) + 'px';
   wrapperElement.style.paddingLeft = (e.clientX - element.offsetLeft) + 'px'; /new
}

Changes to script from Sidebar-Example:

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
  
  element.style.width = ""; //new
  wrapperElement.style.paddingLeft = ""; // new
});

Full code: https://codepen.io/MichaelBootstrap/pen/BapJzYz

This works fine. Disadvantages:

1. After fading in and out, the sidebar has the old width again.
2. There are still problems when the sidebar becomes too small
3. Draging is not so smooth

If some one have a besser solution, then I would be very pleased.