Merge branch 'master' into HEAD

Author: jonas-eschmann

index.css

@@ -12,7 +12,7 @@ body {
     min-height: 0;
 }
 #vehicle-container{
-    width: 200px;
+    width: 0px;
     overflow: auto;
     white-space: nowrap;
 }

sidebar.js

@@ -10,43 +10,62 @@ document.addEventListener('DOMContentLoaded', () => {
         window.dispatchEvent(new Event('resize'));
     }
 
+    // Mouse and touch events
     sidebarResizer.addEventListener('mousedown', initResize);
+    sidebarResizer.addEventListener('touchstart', initResize, { passive: false });
     document.addEventListener('mousemove', resize);
+    document.addEventListener('touchmove', resize, { passive: false });
     document.addEventListener('mouseup', stopResize);
+    document.addEventListener('touchend', stopResize);
 
     sidebarResizer.addEventListener('click', e => {
         if (didMove) {
             e.stopPropagation();
             e.preventDefault();
             return;
         }
-        vehicleContainer.style.width = '0px';
-        localStorage.setItem('vehicle-container-width', '0px');
+        let newWidth = '0px';
+        if(parseInt(vehicleContainer.style.width) < 10 || !vehicleContainer.style.width){
+            newWidth = '200px';
+        }
+        vehicleContainer.style.width = newWidth;
+        localStorage.setItem('vehicle-container-width', newWidth);
         window.dispatchEvent(new Event('resize'));
     });
 
+    function getClientX(e) {
+        return e.touches ? e.touches[0].clientX : e.clientX;
+    }
+
     function initResize(e) {
+        if (e.touches && e.touches.length !== 1) return;
         isResizing = true;
         didMove = false;
-        dragStartX = e.clientX;
+        dragStartX = getClientX(e);
         document.body.style.cursor = 'col-resize';
         e.preventDefault();
     }
 
     function resize(e) {
         if (!isResizing) return;
+        if (e.touches && e.touches.length !== 1) return;
 
-        if (Math.abs(e.clientX - dragStartX) > 3) {
+        const clientX = getClientX(e);
+        if (Math.abs(clientX - dragStartX) > 3) {
             didMove = true;
         }
 
         const containerRect = sidebarResizer.parentElement.getBoundingClientRect();
-        const newWidth = e.clientX - containerRect.left - sidebarResizer.getBoundingClientRect().width / 2;
+        let newWidth = clientX - containerRect.left - sidebarResizer.getBoundingClientRect().width / 2;
+        newWidth = Math.max(0, newWidth)
+
 
         vehicleContainer.style.width = `${newWidth}px`;
         simContainer.style.flexGrow = 1;
         window.dispatchEvent(new Event('resize'));
         localStorage.setItem('vehicle-container-width', newWidth);
+        
+        e.preventDefault();
     }
 
     function stopResize() {