diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index d165ad7073..d551eb74a3 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -249,6 +249,59 @@ body[data-route^="Module"] .main-menu .form-sidebar {
 .layout-side-section .list-sidebar {
   margin-top: -15px;
 }
+@media (max-width: 991px) {
+  .layout-side-section .list-sidebar {
+    margin-top: 0;
+    position: fixed;
+    background: white;
+    top: 0;
+    left: 0;
+    transform: translateX(-110%);
+    z-index: 9999;
+    box-shadow: 5px 0 25px 0px rgba(0, 0, 0, 0.3);
+    height: 100%;
+    width: 40%;
+    padding: 25px;
+    display: block !important;
+    transition: transform 300ms ease-in-out;
+  }
+  .layout-side-section .list-sidebar i.octicon-x {
+    margin: -12px;
+    padding: 12px;
+  }
+  .layout-side-section .list-sidebar div.close-sidebar {
+    opacity: 0;
+    transition: opacity 300ms ease 200ms;
+  }
+  .layout-side-section .list-sidebar.opened {
+    transform: translateX(0);
+  }
+  .layout-side-section .list-sidebar.opened div.close-sidebar {
+    opacity: 0.5;
+    background: #000;
+    position: fixed;
+    top: 0;
+    right: -150%;
+    width: 150%;
+    height: 100%;
+    z-index: 9998;
+  }
+  .layout-side-section .list-sidebar .reports-dropdown {
+    margin: 10px 0;
+  }
+  .layout-side-section .list-sidebar .reports-dropdown li:not(.divider) {
+    padding: 10px 0;
+  }
+}
+@media (max-width: 767px) {
+  .layout-side-section .list-sidebar {
+    width: 70%;
+  }
+  .layout-side-section .list-sidebar.opened div.close-sidebar {
+    right: -42.857%;
+    width: 42.857%;
+  }
+}
 .sidebar-left .list-sidebar .stat-label,
 .sidebar-left .list-sidebar .stat-no-records {
   padding: 12px 14px;
diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js
index 0d137e7d6e..6a84925d33 100644
--- a/frappe/public/js/frappe/list/list_sidebar.js
+++ b/frappe/public/js/frappe/list/list_sidebar.js
@@ -20,9 +20,20 @@ frappe.views.ListSidebar = Class.extend({
 
 		this.offcanvas_list_sidebar = $(".offcanvas .list-sidebar").html(sidebar_content);
 		this.page_sidebar = $('<div class="list-sidebar hidden-xs hidden-sm"></div>')
-			.html(sidebar_content)
+			.html('<i class="octicon octicon-x close-sidebar visible-xs visible-sm pull-right"></i>')
+			.append('<div class="close-sidebar visible-xs visible-sm"></div>')
+			.append(sidebar_content)
 			.appendTo(this.page.sidebar.empty());
 
+		this.page_sidebar.find(".close-sidebar").click(function() {
+			var list_sidebar = $('.layout-side-section .list-sidebar');
+			list_sidebar.removeClass('opened');
+			list_sidebar.find('.dropdown-toggle').removeClass('text-muted');
+			setTimeout(function() {
+				list_sidebar.find('.reports-dropdown').addClass('dropdown-menu');
+			}, 300);
+		});
+
 		this.sidebar = this.page_sidebar.add(this.offcanvas_list_sidebar);
 
 		this.setup_reports();
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index 29cd587e55..899983adc3 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -10,7 +10,13 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 		}));
 		var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("offcanvas_left_sidebar", {}));
 
-		header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
+		// header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
+		header.find(".toggle-sidebar").on("click", function () {
+			var list_sidebar = $('.layout-side-section .list-sidebar');
+			list_sidebar.addClass('opened');
+			list_sidebar.find('.reports-dropdown').removeClass('dropdown-menu').addClass('list-unstyled');
+			list_sidebar.find('.dropdown-toggle').addClass('text-muted').find('.caret').addClass('hidden-xs');
+		});
 
 		header.find(".toggle-navbar-new-comments").on("click", function() {
 			$(".offcanvas").toggleClass("active-right").removeClass("active-left");
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 5b94d0bb45..86394588d6 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -255,6 +255,63 @@ body[data-route^="Module"] .main-menu {
 	margin-top: -15px;
 }
 
+.layout-side-section .list-sidebar {
+	@media (max-width: 991px) {
+		margin-top: 0;
+		position: fixed;
+		background: white;
+		top: 0;
+		left: 0;
+		transform: translateX(-110%);
+		z-index: 9999;
+		box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
+		height: 100%;
+		width: 40%;
+		padding: 25px;
+		display: block !important;
+		transition: transform 300ms ease-in-out;
+
+		i.octicon-x {
+			margin: -12px;
+			padding: 12px;
+		}
+
+		div.close-sidebar {
+			opacity: 0;
+			transition: opacity 300ms ease 200ms;
+		}
+
+		&.opened {
+			transform: translateX(0);
+			div.close-sidebar {
+				opacity: 0.5;
+				background: #000;
+				position: fixed;
+				top: 0;
+				right: -150%;
+				width: 150%;
+				height: 100%;
+				z-index: 9998;
+			}
+		}
+
+		.reports-dropdown {
+			margin: 10px 0;
+
+			li:not(.divider) {
+				padding: 10px 0;
+			}
+		}
+	}
+	@media (max-width: 767px) {
+		width: 70%;
+		&.opened div.close-sidebar {
+			right: -42.857%;
+			width: 42.857%;
+		}
+	}
+}
+
 .sidebar-left .list-sidebar {
 	.stat-label,
 	.stat-no-records {