diff --git a/frappe/public/js/frappe/ui/sidebar.html b/frappe/public/js/frappe/ui/sidebar.html
index 2391a4c2a2..1f427d438f 100644
--- a/frappe/public/js/frappe/ui/sidebar.html
+++ b/frappe/public/js/frappe/ui/sidebar.html
@@ -11,6 +11,6 @@
 						<use href="#icon-arrow-right-to-line"></use></svg> {%= __("Collapse") %}</a>
 			</div>
 		</div>
-
+		<div class="overlay" style="z-index: 1021;"></div>
 	</div>
 </div>
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 61e942e9d6..e7d671bfd4 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -306,11 +306,26 @@ body {
 
 	// expands when navbar-brand is clicked
 	.body-sidebar-container.expanded {
+		position: relative;
 		.body-sidebar {
 			padding: 8px 8px 10px 8px;
 			width: 220px;
 			height: 100%;
+			position: absolute;
+			bottom: 0;
+			top: 0;
 		}
+		.overlay {
+			display: block;
+			position: absolute;
+			width: 100vw;
+			height: 100%;
+			z-index: 1021;
+			left: 220px;
+			overflow: auto;
+			background-color: rgba(128, 128, 128, 0.5);
+		}
+
 		// acts a overlay when in mobile view
 		.body-sidebar-placeholder {
 			display: flex;
@@ -408,6 +423,9 @@ body {
 	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
 	border-radius: 8px;
 }
+.overlay {
+	display: none;
+}
 // form sidebar
 .form-sidebar {
 	.sidebar-section {