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 = $(`
+ this.container = $(`
+
`);
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 {
``
);
$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;
+ }
}
}