From 01e804a641b320ef450ae7a1c0138429b33a9586 Mon Sep 17 00:00:00 2001 From: Ejaaz Khan Date: Mon, 12 Jan 2026 08:30:39 +0530 Subject: [PATCH 1/2] feat: add open sidebar option in toolbar --- frappe/public/js/frappe/form/toolbar.js | 44 ++++++++++++++++++ frappe/public/js/frappe/ui/page.js | 61 ------------------------- 2 files changed, 44 insertions(+), 61 deletions(-) diff --git a/frappe/public/js/frappe/form/toolbar.js b/frappe/public/js/frappe/form/toolbar.js index 1f65c44f30..d36fd811c1 100644 --- a/frappe/public/js/frappe/form/toolbar.js +++ b/frappe/public/js/frappe/form/toolbar.js @@ -352,6 +352,7 @@ frappe.ui.form.Toolbar = class Toolbar { // Print this.add_discard(); this.add_print(); + this.add_open_sidebar(); this.add_email(); this.add_rename(); this.add_reload(); @@ -484,6 +485,19 @@ frappe.ui.form.Toolbar = class Toolbar { } } + add_open_sidebar() { + if (this.page.hide_sidebar) { + return; + } + this.page.add_menu_item( + __("Open Sidebar"), + () => { + this.setup_sidebar_toggle(this.frm.sidebar.sidebar.parent()); + }, + true + ); + } + add_reload() { // reload this.page.add_menu_item( @@ -894,6 +908,36 @@ frappe.ui.form.Toolbar = class Toolbar { dialog.show(); } + setup_sidebar_toggle(sidebar_wrapper) { + console.log(sidebar_wrapper); + if (frappe.utils.is_xs() || frappe.utils.is_sm()) { + this.setup_overlay_sidebar(sidebar_wrapper); + } else { + sidebar_wrapper.toggle(); + } + $(document.body).trigger("toggleSidebar"); + } + + setup_overlay_sidebar(sidebar_wrapper) { + sidebar_wrapper.find(".close-sidebar").remove(); + let overlay_sidebar = sidebar_wrapper.find(".overlay-sidebar").addClass("opened"); + $('
').hide().appendTo(sidebar_wrapper).fadeIn(); + let scroll_container = $("html").css("overflow-y", "hidden"); + + sidebar_wrapper.find(".close-sidebar").on("click", (e) => this.close_sidebar(e)); + sidebar_wrapper.on("click", "button:not(.dropdown-toggle)", (e) => this.close_sidebar(e)); + + this.close_sidebar = () => { + scroll_container.css("overflow-y", ""); + sidebar_wrapper.find("div.close-sidebar").fadeOut(() => { + overlay_sidebar + .removeClass("opened") + .find(".dropdown-toggle") + .removeClass("text-muted"); + }); + }; + } + follow() { let is_followed = this.frm.get_docinfo().is_document_followed; frappe diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index b2ab3dc581..2a7c1be5fb 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -44,7 +44,6 @@ frappe.ui.Page = class Page { this.wrapper = $(this.parent); this.add_main_section(); this.setup_scroll_handler(); - this.setup_sidebar_toggle(); } setup_scroll_handler() { @@ -195,66 +194,6 @@ frappe.ui.Page = class Page { .appendTo(this.sidebar); } - setup_sidebar_toggle() { - let sidebar_toggle = $(".page-head").find(".sidebar-toggle-btn"); - let sidebar_wrapper = this.wrapper.find(".layout-side-section"); - if (this.disable_sidebar_toggle || !sidebar_wrapper.length) { - sidebar_toggle.last().remove(); - this.wrapper.addClass("no-list-sidebar"); - } else { - if (!frappe.is_mobile()) { - sidebar_toggle.attr("title", __("Toggle Sidebar")); - } - sidebar_toggle.attr("aria-label", __("Toggle Sidebar")); - sidebar_toggle.tooltip({ - delay: { show: 600, hide: 100 }, - trigger: "hover", - }); - sidebar_toggle.click(() => { - if (frappe.utils.is_xs() || frappe.utils.is_sm()) { - this.setup_overlay_sidebar(); - } else { - sidebar_wrapper.toggle(); - } - $(document.body).trigger("toggleSidebar"); - this.update_sidebar_icon(); - }); - } - } - - setup_overlay_sidebar() { - this.sidebar.find(".close-sidebar").remove(); - let overlay_sidebar = this.sidebar.find(".overlay-sidebar").addClass("opened"); - $('
').hide().appendTo(this.sidebar).fadeIn(); - let scroll_container = $("html").css("overflow-y", "hidden"); - - this.sidebar.find(".close-sidebar").on("click", (e) => this.close_sidebar(e)); - this.sidebar.on("click", "button:not(.dropdown-toggle)", (e) => this.close_sidebar(e)); - - this.close_sidebar = () => { - 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_toggle_icon = sidebar_toggle.find(".sidebar-toggle-icon"); - let sidebar_wrapper = this.wrapper.find(".layout-side-section"); - let is_sidebar_visible = $(sidebar_wrapper).is(":visible"); - sidebar_toggle_icon.html( - frappe.utils.icon( - is_sidebar_visible ? "es-line-sidebar-collapse" : "es-line-sidebar-expand", - "md" - ) - ); - } - set_indicator(label, color) { this.clear_indicator().removeClass("hide").html(`${label}`).addClass(color); } From c1513d0fce01b92b9f5509f4294df0dc4a71b27b Mon Sep 17 00:00:00 2001 From: Ejaaz Khan Date: Mon, 12 Jan 2026 11:17:11 +0530 Subject: [PATCH 2/2] feat: merge 2 nav's into one --- frappe/public/js/frappe/list/base_list.js | 5 +---- frappe/public/js/frappe/ui/page.html | 16 ++++++++++++++-- frappe/public/js/frappe/ui/page.js | 17 +++++++++++++++++ frappe/public/js/frappe/ui/toolbar/navbar.html | 18 +----------------- frappe/public/js/frappe/ui/toolbar/toolbar.js | 2 +- frappe/public/scss/desk/page.scss | 6 ++++++ 6 files changed, 40 insertions(+), 24 deletions(-) diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index e48d81efa7..f28a1627ab 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/frappe/public/js/frappe/list/base_list.js @@ -435,10 +435,7 @@ frappe.views.BaseList = class BaseList { this.$result[0].style.removeProperty("height"); // place it at the footer of the page - const resultContainerHeight = - window.innerHeight - - this.$result.get(0).offsetTop - - this.$paging_area.get(0).offsetHeight; + const resultContainerHeight = window.innerHeight - this.$paging_area.get(0).offsetHeight; this.$result.parent(".result-container").css({ height: resultContainerHeight - (frappe.is_mobile() ? 100 : 0) + "px", }); diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html index 070103d0bd..486a02b36a 100644 --- a/frappe/public/js/frappe/ui/page.html +++ b/frappe/public/js/frappe/ui/page.html @@ -2,7 +2,7 @@
-
-
+
@@ -60,6 +60,18 @@
+ {% if frappe.is_mobile() %} + + {% endif %}
diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 2a7c1be5fb..58d7e594b9 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -44,6 +44,15 @@ frappe.ui.Page = class Page { this.wrapper = $(this.parent); this.add_main_section(); this.setup_scroll_handler(); + this.setup_main_sidebar_toggle(); + this.setup_mobile_awesomebar(); + } + + setup_mobile_awesomebar() { + if (frappe.boot.desk_settings.search_bar && frappe.is_mobile()) { + let awesome_bar = new frappe.search.AwesomeBar(); + awesome_bar.setup(".navbar-modal-search-mobile"); + } } setup_scroll_handler() { @@ -223,6 +232,14 @@ frappe.ui.Page = class Page { return button; } + setup_main_sidebar_toggle() { + $(".sidebar-toggle-btn.navbar-brand").on("click", (event) => { + frappe.app.sidebar.set_height(); + frappe.app.sidebar.toggle_width(); + frappe.app.sidebar.prevent_scroll(); + }); + } + clear_indicator() { return this.indicator .removeClass() diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html index 2fa9e8a326..bd09ee0774 100644 --- a/frappe/public/js/frappe/ui/toolbar/navbar.html +++ b/frappe/public/js/frappe/ui/toolbar/navbar.html @@ -1,10 +1,7 @@
- {% if (frappe.boot.read_only || frappe.boot.user.impersonated_by || frappe.is_mobile()) { %} + {% if (frappe.boot.read_only || frappe.boot.user.impersonated_by) { %} diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js index 08506785a1..c8e652f952 100644 --- a/frappe/public/js/frappe/ui/toolbar/toolbar.js +++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js @@ -33,7 +33,6 @@ frappe.ui.toolbar.Toolbar = class { this.bind_events(); $(document).trigger("toolbar_setup"); this.navbar = $(".navbar-brand"); - this.app_logo = this.navbar.find(".app-logo"); this.bind_click(); } change_toolbar() { @@ -54,6 +53,7 @@ frappe.ui.toolbar.Toolbar = class { frappe.app.sidebar.prevent_scroll(); }); } + bind_events() { // clear all custom menus on page change $(document).on("page-change", function () { diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss index 86c3ad8039..eccaf6e5e3 100644 --- a/frappe/public/scss/desk/page.scss +++ b/frappe/public/scss/desk/page.scss @@ -1,3 +1,9 @@ +body:not([data-route^="Form"]) { + .layout-side-section { + display: none; + } +} + .page-title { display: flex; align-items: center;