feat: add open sidebar option in toolbar

This commit is contained in:
Ejaaz Khan 2026-01-12 08:30:39 +05:30
parent af6f61e140
commit 01e804a641
2 changed files with 44 additions and 61 deletions

View file

@ -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");
$('<div class="close-sidebar">').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

View file

@ -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");
$('<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) => 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(`<span>${label}</span>`).addClass(color);
}