From d5f1d9936809f211b64a8b717c8d5577e85cecb1 Mon Sep 17 00:00:00 2001
From: prssanna <prssud@gmail.com>
Date: Wed, 9 Dec 2020 18:47:59 +0530
Subject: [PATCH] refactor: overlay sidebar for smaller screens

---
 .../frappe/form/templates/form_sidebar.html   | 11 -----
 .../js/frappe/list/list_sidebar_group_by.js   |  2 +-
 frappe/public/js/frappe/ui/page.js            | 26 ++++++++++-
 frappe/public/js/frappe/ui/toolbar/toolbar.js | 37 +---------------
 frappe/public/scss/desk/sidebar.scss          | 43 ++-----------------
 5 files changed, 31 insertions(+), 88 deletions(-)

diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html
index 791e8444f9..d1f7335c7e 100644
--- a/frappe/public/js/frappe/form/templates/form_sidebar.html
+++ b/frappe/public/js/frappe/form/templates/form_sidebar.html
@@ -1,10 +1,3 @@
-<ul class="list-unstyled sidebar-menu visible-sm visible-xs">
-	<li>
-		<a class="navbar-home" href="#">
-			<img class="app-logo" src="{{ frappe.app.logo_url }}">
-		</a>
-	</li>
-</ul>
 <ul class="list-unstyled sidebar-menu user-actions hidden"></ul>
 <ul class="list-unstyled sidebar-menu sidebar-image-section hidden-xs hidden-sm hide">
 	<li class="sidebar-image-wrapper">
@@ -165,7 +158,3 @@
 {% if(frappe.get_form_sidebar_extension) { %}
 	{{ frappe.get_form_sidebar_extension() }}
 {% } %}
-<ul class="list-unstyled visible-xs visible-sm">
-
-	<li class="close-sidebar">Close</li>
-</ul>
diff --git a/frappe/public/js/frappe/list/list_sidebar_group_by.js b/frappe/public/js/frappe/list/list_sidebar_group_by.js
index 188c0c62c6..97fe00ecb3 100644
--- a/frappe/public/js/frappe/list/list_sidebar_group_by.js
+++ b/frappe/public/js/frappe/list/list_sidebar_group_by.js
@@ -55,7 +55,7 @@ frappe.views.ListGroupBy = class ListGroupBy {
 			<div class="list-group-by-fields">
 			</div>
 			<li class="add-list-group-by sidebar-action">
-				<a class="add-group-by hidden-xs">
+				<a class="add-group-by">
 					${__('Edit Filters')}
 				</a>
 			</li>
diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index a79b2d5e4c..8338c4475e 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -163,12 +163,36 @@ frappe.ui.Page = Class.extend({
 		} else {
 			sidebar_toggle.attr("title", __("Toggle Sidebar")).tooltip();
 			sidebar_toggle.click(() => {
-				sidebar_wrapper.toggle();
+				if (frappe.utils.is_xs() || frappe.utils.is_sm()) {
+					this.setup_overlay_sidebar();
+				} else {
+					sidebar_wrapper.toggle();
+				}
 				this.update_sidebar_icon();
 			});
 		}
 	},
 
+	setup_overlay_sidebar() {
+		let overlay_sidebar = this.sidebar.find('.overlay-sidebar')
+			.addClass('opened');
+		$('<div class="close-sidebar">').hide().appendTo(this.sidebar).fadeIn();
+		let scroll_container = $('html')
+			.css("overflow-y", "hidden");
+
+		this.sidebar.find(".close-sidebar").on('click', (e) => close_sidebar(e));
+		this.sidebar.on("click", "button:not(.dropdown-toggle)", (e) => close_sidebar(e));
+
+		let close_sidebar = (e) => {
+			scroll_container.css("overflow-y", "");
+			this.sidebar.find("div.close-sidebar").fadeOut(() => {
+				overlay_sidebar.removeClass('opened')
+					.find('.dropdown-toggle')
+					.removeClass('text-muted');
+			});
+		}
+	},
+
 	update_sidebar_icon() {
 		let sidebar_toggle = $('.page-head').find('.sidebar-toggle-btn');
 		let sidebar_wrapper = this.wrapper.find('.layout-side-section');
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index 6e4e760010..168cb1be0c 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -18,7 +18,7 @@ frappe.ui.toolbar.Toolbar = class {
 	}
 
 	make () {
-		this.setup_sidebar();
+		// this.setup_sidebar();
 		this.setup_help();
 
 		this.bind_events();
@@ -44,41 +44,6 @@ frappe.ui.toolbar.Toolbar = class {
 		});
 	}
 
-	setup_sidebar () {
-		var header = $('header');
-		header.find(".toggle-sidebar").on("click", function() {
-			var layout_side_section = $('.layout-side-section');
-			var overlay_sidebar = layout_side_section.find('.overlay-sidebar');
-
-			overlay_sidebar.addClass('opened');
-			overlay_sidebar.find('.reports-dropdown')
-				.removeClass('dropdown-menu')
-				.addClass('list-unstyled');
-			overlay_sidebar.find('.dropdown-toggle')
-				.addClass('text-muted').find('.caret')
-				.addClass('hidden-xs hidden-sm');
-
-			$('<div class="close-sidebar">').hide().appendTo(layout_side_section).fadeIn();
-
-			var scroll_container = $('html');
-			scroll_container.css("overflow-y", "hidden");
-
-			layout_side_section.find(".close-sidebar").on('click', close_sidebar);
-			layout_side_section.on("click", "a:not(.dropdown-toggle)", close_sidebar);
-
-			function close_sidebar(e) {
-				scroll_container.css("overflow-y", "");
-
-				layout_side_section.find("div.close-sidebar").fadeOut(function() {
-					overlay_sidebar.removeClass('opened')
-						.find('.dropdown-toggle')
-						.removeClass('text-muted');
-					overlay_sidebar.find('.reports-dropdown')
-						.addClass('dropdown-menu');
-				});
-			}
-		});
-	}
 
 	setup_help () {
 		frappe.provide('frappe.help');
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 8ef6b0cc4a..63e8cceb96 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -205,16 +205,17 @@ body[data-route^="Module"] .main-menu {
 		@media (max-width: 991px) {
 			margin-top: 0 !important;
 			position: fixed;
-			background: white;
+			background: var(--fg-color);
 			top: 0;
 			left: 0;
 			transform: translateX(-110%);
 			z-index: 9999;
-			box-shadow: 5px 0 25px 0px rgba(0, 0, 0, 0.3);
+			box-shadow: var(--shadow-base);
 			height: 100%;
 			width: 40%;
 			display: block !important;
 			transition: transform 200ms ease-in-out;
+			padding: var(--padding-md);
 
 			&.opened {
 				transform: translateX(0);
@@ -227,40 +228,10 @@ body[data-route^="Module"] .main-menu {
 				opacity: 0.7;
 			}
 
-			li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
-				padding: 10px 15px;
-			}
-
-			.modified-by,
-			.created-by {
-				margin: 0;
-			}
-
-			.badge {
-				top: 9px;
-				right: 15px;
-			}
-
-			.reports-dropdown {
-				margin-top: 10px;
-				margin-bottom: -10px;
-
-				li:not(.divider) {
-					padding: 12.5px 0 !important;
-				}
-
-				li.divider {
-					height: 0;
-				}
-			}
-
-			.sidebar-menu {
-				padding: 2px 0px 5px 0px;
-			}
 		}
 
 		@media (max-width: 767px) {
-			width: 70%;
+			width: 60%;
 		}
 	}
 
@@ -275,12 +246,6 @@ body[data-route^="Module"] .main-menu {
 		width: 100%;
 	}
 
-	.sidebar-menu {
-		@media (max-width: 991px) {
-			margin: 0;
-		}
-	}
-
 	.module-sidebar-nav {
 		@media (max-width: 991px) {
 			padding-left: 0;