diff --git a/src/public/app/widgets/mobile_widgets/sidebar_container.js b/src/public/app/widgets/mobile_widgets/sidebar_container.js
index 1304d787b..f6cae42d9 100644
--- a/src/public/app/widgets/mobile_widgets/sidebar_container.js
+++ b/src/public/app/widgets/mobile_widgets/sidebar_container.js
@@ -1,5 +1,9 @@
 import FlexContainer from "../containers/flex_container.js";
 
+const DRAG_STATE_NONE = 0;
+const DRAG_STATE_INITIAL_DRAG = 1;
+const DRAG_STATE_DRAGGING = 2;
+
 export default class SidebarContainer extends FlexContainer {
 
     constructor(screenName, direction) {
@@ -7,6 +11,7 @@ export default class SidebarContainer extends FlexContainer {
 
         this.screenName = screenName;
         this.currentTranslate = -100;
+        this.dragState = DRAG_STATE_NONE;
     }
 
     doRender() {
@@ -32,37 +37,40 @@ export default class SidebarContainer extends FlexContainer {
         }
 
         const x = e.touches ? e.touches[0].clientX : e.clientX;
-
         if (x > 30 && this.currentTranslate === -100) {
             return;
         }
 
-        this.isDragging = true;
         this.startX = x;
-
-        this.sidebarContainer.style.zIndex = 1000;
-
-        this.originalTransition = this.sidebarWrapper.style.transition;
-        this.sidebarWrapper.style.transition = "none";
-
-        e.preventDefault();
+        this.dragState = DRAG_STATE_INITIAL_DRAG;
     }
 
     #onDragMove(e) {
-        if (!this.isDragging) {
+        if (this.dragState === DRAG_STATE_NONE) {
             return;
         }
 
         const x = e.touches ? e.touches[0].clientX : e.clientX;
         const deltaX = x - this.startX;
-        const width = this.sidebarWrapper.offsetWidth;
-        const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
-        this.translatePercentage = translatePercentage;
-        this.sidebarWrapper.style.transform = `translateX(${translatePercentage}%)`;
+        if (this.dragState === DRAG_STATE_INITIAL_DRAG) {
+            if (deltaX > 5) {
+                this.sidebarContainer.style.zIndex = 1000;
+                this.originalTransition = this.sidebarWrapper.style.transition;
+                this.sidebarWrapper.style.transition = "none";
+                this.dragState = DRAG_STATE_DRAGGING;
+            }
+        } else if (this.dragState === DRAG_STATE_DRAGGING) {
+            const width = this.sidebarWrapper.offsetWidth;
+            const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
+            this.translatePercentage = translatePercentage;
+            this.sidebarWrapper.style.transform = `translateX(${translatePercentage}%)`;
+        }
+
+        e.preventDefault();
     }
 
     #onDragEnd(e) {
-        if (!this.isDragging) {
+        if (this.dragState === DRAG_STATE_NONE) {
             return;
         }
 
@@ -75,6 +83,8 @@ export default class SidebarContainer extends FlexContainer {
         if (!isOpen) {
             this.sidebarContainer.style.zIndex = -1000;
         }
+
+        this.dragState = DRAG_STATE_NONE;
     }
 
     activeScreenChangedEvent({activeScreen}) {