From 6c4296c44afc4a265c4c12ea40a69768fdaef2c8 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 4 Jun 2020 20:18:39 +0530
Subject: [PATCH] feat: add page switcher for mobile view

---
 .../public/js/frappe/views/desktop/desktop.js | 27 ++++++++++++--
 frappe/public/less/desktop.less               | 37 +++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/frappe/views/desktop/desktop.js b/frappe/public/js/frappe/views/desktop/desktop.js
index 51add61f07..60dbc928c9 100644
--- a/frappe/public/js/frappe/views/desktop/desktop.js
+++ b/frappe/public/js/frappe/views/desktop/desktop.js
@@ -26,14 +26,25 @@ export default class Desktop {
 	}
 
 	make_container() {
-		this.container = $(`<div class="desk-container row">
+		this.container = $(`
+			<div class="desk-container row">
 				<div class="desk-sidebar"></div>
-				<div class="desk-body"></div>
+				<div class="desk-body">
+					<div class="page-switcher">
+						<div class="current-title"></div>
+						<i class="fa fa-chevron-down text-muted"></i>
+					</div>
+					<div class="mobile-list">
+					</div>
+				</div>
 			</div>`);
 
 		this.container.appendTo(this.wrapper);
 		this.sidebar = this.container.find(".desk-sidebar");
 		this.body = this.container.find(".desk-body");
+		this.current_title = this.container.find(".current-title");
+		this.mobile_list = this.container.find(".mobile-list");
+		this.page_switcher = this.container.find(".page-switcher");
 	}
 
 	fetch_desktop_settings() {
@@ -73,7 +84,9 @@ export default class Desktop {
 				this.current_page = item.name;
 			}
 			let $item = get_sidebar_item(item);
-			$item.appendTo(this.sidebar);
+
+			$item.appendTo(this.mobile_list);
+			$item.clone().appendTo(this.sidebar);
 			this.sidebar_items[item.name] = $item;
 		};
 
@@ -84,6 +97,7 @@ export default class Desktop {
 				`<div class="sidebar-group-title h6 uppercase">${__(name)}</div>`
 			);
 			$title.appendTo(this.sidebar);
+			$title.clone().appendTo(this.mobile_list);
 		};
 
 		this.sidebar_categories.forEach(category => {
@@ -94,6 +108,11 @@ export default class Desktop {
 				});
 			}
 		});
+		if (frappe.is_mobile) {
+			this.page_switcher.on('click', () => {
+				this.mobile_list.toggle();
+			});
+		}
 	}
 
 	show_page(page) {
@@ -106,6 +125,8 @@ export default class Desktop {
 			this.sidebar_items[page].addClass("selected");
 		}
 		this.current_page = page;
+		this.mobile_list.hide();
+		this.current_title.empty().append(this.current_page);
 		localStorage.current_desk_page = page;
 		this.pages[page] ? this.pages[page].show() : this.make_page(page);
 	}
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index 08dc68b9bf..7711075f36 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -3,6 +3,40 @@
 .desk-container {
 	margin-top: 20px;
 
+	.page-switcher {
+		border-radius: 5px;
+		display: none;
+		border: 1px solid @border-color;
+		background-color: @panel-bg;
+		padding: 8px 15px;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 10px;
+	}
+
+	.mobile-list {
+		display: none;
+		border-radius: 5px;
+		padding: 8px 15px;
+		border: 1px solid @border-color;
+
+		.sidebar-item {
+			font-size: 12px;
+			font-weight: bold;
+			margin-bottom: 1px;
+			display: flex;
+			padding: 10px 15px;
+			border-radius: 4px;
+			text-decoration: none;
+			cursor: pointer;
+			text-rendering: optimizelegibility;
+
+			&.selected {
+				background-color: @panel-bg;
+			}
+		}
+	}
+
 	.desk-sidebar {
 		width: 20rem;
 		display: block;
@@ -103,6 +137,9 @@
 		.desk-body {
 			padding-left: 15px !important;
 		}
+		.page-switcher {
+			display: flex;
+		}
 	}
 }