Merge pull request #34941 from sokumon/sibling-in-dropdown

frappe/public/js/frappe/ui/menu.js

@@ -17,9 +17,10 @@ frappe.ui.menu = class ContextMenu {
 			this.add_menu_item(f);
 		});
 
-		if (!$.contains(document.body, this.template[0])) {
-			$(document.body).append(this.template);
-		}
+		// if (!$.contains(document.body, this.template[0])) {
+		// 	$(document.body).append(this.template);
+		// }
+		$(document.body).append(this.template);
 	}
 	add_menu_item(item) {
 		const me = this;
@@ -36,21 +37,40 @@ frappe.ui.menu = class ContextMenu {
 					}
 				</div>
 				<span class="menu-item-title">${item.label}</span>
+				<div class="menu-item-icon" style="margin-left:auto">
+					${item.items && item.items.length ? frappe.utils.icon("chevron-right") : ""}
+				</div>
+
 			</a>
 		</div>`);
 		if (!item.url) {
 			item_wrapper.on("click", function () {
-				item.onClick();
-				me.opts.onItemClick && me.opts.onItemClick(me.opts.parent);
-				me.hide();
+				item.onClick && item.onClick();
+				if (!(item.items && item.items.length)) {
+					me.opts.onItemClick && me.opts.onItemClick(me.opts.parent);
+					me.hide();
+				}
 			});
+		} else if (item.items) {
+			$();
 		} else {
 			$(item_wrapper).find("a").attr("href", item.url);
 		}
 		item_wrapper.appendTo(this.template);
+		if (item.items) {
+			this.handle_nested_menu(item_wrapper, item);
+		}
+	}
+	handle_nested_menu(item_wrapper, item) {
+		frappe.ui.create_menu({
+			parent: item_wrapper,
+			menu_items: item.items,
+			nested: true,
+			parent_menu: this.name,
+		});
 	}
 	show(parent) {
-		this.close_all_other_menu();
+		// this.close_all_other_menu();
 
 		this.make();
 
@@ -58,12 +78,25 @@ frappe.ui.menu = class ContextMenu {
 		const height = $(parent).outerHeight();
 		this.left_offset = 0;
 		this.gap = 4;
-		this.template.css({
-			display: "block",
-			position: "absolute",
-			top: offset.top + height + this.gap + "px",
-			left: offset.left,
-		});
+		if (this.opts.nested && this.opts.parent_menu) {
+			let dropdown = frappe.menu_map[this.opts.parent_menu].template;
+			let width = dropdown.outerWidth();
+			let offset = $(dropdown).offset();
+			this.template.css({
+				display: "block",
+				position: "absolute",
+				top: offset.top + "px",
+				left: offset.left + width + this.gap + "px",
+			});
+		} else {
+			this.template.css({
+				display: "block",
+				position: "absolute",
+				top: offset.top + height + this.gap + "px",
+				left: offset.left,
+			});
+		}
+
 		if (this.open_on_left) {
 			this.left_offset = parent.getBoundingClientRect().width;
 			this.template.css({
@@ -151,12 +184,14 @@ frappe.ui.create_menu = function (opts) {
 	$(document).on("click", function () {
 		if (frappe.menu_map[context_menu.name].visible) {
 			frappe.menu_map[context_menu.name].hide();
+			opts.onHide && opts.onHide(opts.parent);
 		}
 	});
 
 	$(document).on("keydown", function (e) {
 		if (e.key === "Escape" && frappe.menu_map[context_menu.name].visible) {
 			frappe.menu_map[context_menu.name].hide();
+			opts.onHide && opts.onHide(opts.parent);
 		}
 	});
 };

frappe/public/js/frappe/ui/sidebar/sidebar.js

@@ -52,6 +52,7 @@ frappe.ui.Sidebar = class Sidebar {
 		for (const app of frappe.boot.app_data) {
 			if (app.workspaces.includes(this.workspace_title)) {
 				this.header_subtitle = app.app_title;
+				frappe.current_app = app;
 				this.app_logo_url = app.app_logo_url;
 				return;
 			}

frappe/public/js/frappe/ui/sidebar/sidebar_header.js

@@ -5,7 +5,14 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 		this.drop_down_expanded = false;
 		this.workspace_title = this.sidebar.workspace_title;
 		const me = this;
+		this.fetch;
 		this.dropdown_items = [
+			{
+				name: "workspaces",
+				label: "Workspaces",
+				icon: "wallpaper",
+				items: this.fetch_sibling_workspaces(),
+			},
 			{
 				name: "desktop",
 				label: __("Desktop"),
@@ -37,7 +44,21 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 		this.populate_dropdown_menu();
 		this.setup_select_options();
 	}
-
+	fetch_sibling_workspaces() {
+		let sibling_workspaces = [];
+		let workspaces = frappe.current_app.workspaces;
+		workspaces.splice(workspaces.indexOf(this.workspace_title), 1);
+		workspaces.forEach((w) => {
+			let item = {
+				name: w.toLowerCase(),
+				label: w,
+				icon: "wallpaper",
+				url: frappe.utils.generate_route({ type: "Workspace", route: w.toLowerCase() }),
+			};
+			sibling_workspaces.push(item);
+		});
+		return sibling_workspaces;
+	}
 	make() {
 		$(".sidebar-header").remove();
 		$(".sidebar-header-menu").remove();

frappe/public/js/frappe/ui/sidebar/sidebar_item.js

@@ -246,6 +246,10 @@ frappe.ui.sidebar_item.TypeSectionBreak = class SectionBreakSidebarItem extends
 			if (e.originalEvent.isTrusted) {
 				me.save_section_break_state();
 			}
+			if (!frappe.app.sidebar.sidebar_expanded) {
+				frappe.app.sidebar.open();
+				this.open();
+			}
 		});
 	}
 	save_section_break_state() {