fix(ui): body sidebar is responsive

frappe/core/page/dashboard_view/dashboard_view.js

@@ -20,7 +20,7 @@ frappe.pages["dashboard-view"].on_page_load = function (wrapper) {
 class Dashboard {
 	constructor(wrapper) {
 		this.wrapper = $(wrapper);
-		$(`<div class="dashboard" style="overflow: visible">
+		$(`<div class="dashboard" style="overflow: visible; margin: var(--margin-sm);">
 			<div class="dashboard-graph"></div>
 		</div>`).appendTo(this.wrapper.find(".page-content").empty());
 		this.container = this.wrapper.find(".dashboard-graph");

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

@@ -31,7 +31,12 @@
 				</div>
 			</div>
 			<div class="body-sidebar-bottom">
-				<a class="edit-sidebar-link text-extra-muted hidden">Edit sidebar</a>
+				<a class="edit-sidebar-link text-extra-muted hidden">
+					<svg class="icon icon-sm" style="margin-top: -2px;">
+						<use href="#icon-setting-gear"></use></svg> Settings</a>
+				<a class="close-sidebar-link text-extra-muted hidden">
+					<svg class="icon icon-sm" style="margin-top: -2px;">
+						<use href="#icon-close"></use></svg> Close</a>
 			</div>
 		</div>
 

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

@@ -126,15 +126,17 @@ frappe.ui.Sidebar = class Sidebar {
 	}
 
 	set_current_app(app) {
-		if (frappe.current_app === app) return;
-		frappe.current_app = app;
+		let app_data = frappe.boot.app_data_map[app];
 
 		this.wrapper
 			.find(".app-switcher-dropdown .sidebar-item-icon img")
-			.attr("src", frappe.boot.app_data_map[frappe.current_app].app_logo_url);
-		this.wrapper
-			.find(".app-switcher-dropdown .sidebar-item-label")
-			.html(frappe.boot.app_data_map[frappe.current_app].app_title);
+			.attr("src", app_data.app_logo_url);
+		this.wrapper.find(".app-switcher-dropdown .sidebar-item-label").html(app_data.app_title);
+
+		$(".navbar-brand .app-logo").attr("src", app_data.app_logo_url);
+
+		if (frappe.current_app === app) return;
+		frappe.current_app = app;
 
 		// re-render the sidebar
 		this.make_sidebar();

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -1,13 +1,13 @@
 <div class="sticky-top">
 	<header class="navbar navbar-expand" role="navigation">
 		<div class="container">
-			<!-- <a class="navbar-brand navbar-home" href="/app">
+			<a class="navbar-brand navbar-home" href="/app">
 				<img
 					class="app-logo"
-					src="{{ frappe.boot.app_logo_url }}"
+					src="{{ frappe.boot.app_data[0].app_logo_url }}"
 					alt="{{ __("App Logo") }}"
 				>
-			</a> -->
+			</a>
 			<ul class="nav navbar-nav d-none d-sm-flex" id="navbar-breadcrumbs"></ul>
 			<div class="collapse navbar-collapse justify-content-end">
 				<form class="form-inline fill-width justify-content-end" role="search" onsubmit="return false;">

frappe/public/js/frappe/ui/toolbar/toolbar.js

@@ -28,6 +28,20 @@ frappe.ui.toolbar.Toolbar = class {
 	make() {
 		this.bind_events();
 		$(document).trigger("toolbar_setup");
+		$(".navbar-brand .app-logo").on("click", () => {
+			$(".body-sidebar-container")
+				.toggleClass("expanded")
+				.find(".edit-sidebar-link")
+				.addClass("hidden");
+
+			// show close link
+			$(".body-sidebar-container")
+				.find(".close-sidebar-link")
+				.removeClass("hidden")
+				.on("click", () => {
+					$(".body-sidebar-container").removeClass("expanded");
+				});
+		});
 	}
 
 	bind_events() {

frappe/public/js/frappe/views/breadcrumbs.js

@@ -148,7 +148,7 @@ frappe.breadcrumbs = {
 
 		// choose from __workspaces
 		const doctype_meta = frappe.get_meta(breadcrumbs.doctype);
-		if (doctype_meta.__workspaces?.length) {
+		if (doctype_meta?.__workspaces?.length) {
 			breadcrumbs.workspace = doctype_meta.__workspaces[0];
 		}
 

frappe/public/js/frappe/views/workspace/workspace.js

@@ -56,11 +56,16 @@ frappe.views.Workspace = class Workspace {
 
 	prepare_container() {
 		this.body = this.wrapper.find(".layout-main-section");
+		this.wrapper.find(".page-head").addClass("hidden");
 		this.prepare_new_and_edit();
 	}
 
 	prepare_new_and_edit() {
 		this.$page = $(`
+		<div class="workspace-header" style="display: flex; gap: 7px; margin-top: var(--margin-sm);">
+			<div class="workspace-icon"></div>
+			<h4 class="workspace-title"></h4>
+		</div>
 		<div class="editor-js-container"></div>
 		<div class="workspace-footer">
 			<button data-label="New" class="btn btn-default ellipsis btn-new-workspace">
@@ -105,6 +110,7 @@ frappe.views.Workspace = class Workspace {
 		}
 
 		let page = this.get_page_to_show();
+		if (this._page?.name === page.name) return; // already shown
 
 		if (!frappe.router.current_route[0]) {
 			frappe.route_flags.replace_route = true;
@@ -112,7 +118,7 @@ frappe.views.Workspace = class Workspace {
 			return;
 		}
 
-		this.page.set_title(__(page.name));
+		// this.page.set_title(__(page.title));
 		this.show_page(page);
 	}
 
@@ -211,9 +217,18 @@ frappe.views.Workspace = class Workspace {
 
 			this.prepare_editorjs();
 			$(".item-anchor").removeClass("disable-click");
+			$(".body-sidebar-container").removeClass("expanded");
 
 			this.remove_page_skeleton();
 			frappe.app.sidebar.set_current_app(app);
+			this.wrapper.find(".workspace-title").html(__(this._page.title));
+			this.wrapper
+				.find(".workspace-icon")
+				.html(frappe.utils.icon(this._page.icon || "folder-normal", "md"));
+			console.log(this.page_data);
+
+			localStorage.current_page = current_page.name;
+			localStorage.is_current_page_public = current_page.public ? "true" : "false";
 		}
 	}
 
@@ -240,7 +255,7 @@ frappe.views.Workspace = class Workspace {
 				this.editor.configuration.tools.chart.config.page_data = this.page_data;
 				this.editor.configuration.tools.shortcut.config.page_data = this.page_data;
 				this.editor.configuration.tools.card.config.page_data = this.page_data;
-				this.editor.configuration.tools.onboarding.config.page_data = this.page_data;
+				// this.editor.configuration.tools.onboarding.config.page_data = this.page_data;
 				this.editor.configuration.tools.quick_list.config.page_data = this.page_data;
 				this.editor.configuration.tools.number_card.config.page_data = this.page_data;
 				this.editor.configuration.tools.custom_block.config.page_data = this.page_data;
@@ -700,6 +715,7 @@ frappe.views.Workspace = class Workspace {
 
 	reload() {
 		delete this.pages[this._page.name];
+		this._page = null;
 		return this.get_pages().then((r) => {
 			frappe.boot.sidebar_pages = r;
 			this.sidebar.setup_pages();

frappe/public/scss/desk/css_variables.scss

@@ -20,7 +20,7 @@
 	--error-border: var(--red-400);
 
 	// page
-	--page-head-height: 60px;
+	--page-head-height: 45px;
 	--page-bottom-margin: 60px;
 
 	// checkbox

frappe/public/scss/desk/kanban.scss

@@ -17,6 +17,7 @@
 	display: flex;
 	gap: 0.5em;
 	overflow-y: hidden;
+	margin: var(--margin-sm);
 
 	-ms-overflow-style: none; /* IE and Edge */
 	scrollbar-width: none; /* Firefox */
@@ -31,7 +32,9 @@
 		flex: 1 0 260px;
 		border-radius: var(--border-radius);
 		padding: var(--padding-md);
-		min-height: calc(100vh - 150px);
+		min-height: calc(
+			100vh - var(--navbar-height) - var(--page-head-height) - var(--margin-sm) * 2
+		);
 
 		.add-card {
 			@include flex(flex, center, center, null);

frappe/public/scss/desk/navbar.scss

@@ -42,7 +42,7 @@
 
 .navbar-home {
 	img {
-		max-height: 28px;
+		height: 28px;
 		width: auto;
 	}
 }

frappe/public/scss/desk/page.scss

@@ -36,7 +36,7 @@
 		display: inline-flex;
 		align-items: center;
 		.title-text {
-			@include get_textstyle("2xl", "semibold");
+			@include get_textstyle("xl", "semibold");
 			cursor: pointer;
 			margin-bottom: 0px;
 			margin-right: var(--margin-sm);
@@ -188,7 +188,7 @@
 		}
 
 		.result {
-			overflow: scroll;
+			overflow: auto;
 		}
 	}
 

frappe/public/scss/desk/print_preview.scss

@@ -43,6 +43,7 @@
 }
 
 .layout-side-section.print-preview-sidebar {
+	padding-left: var(--padding-md);
 	padding-right: var(--padding-md);
 
 	.checkbox label {

frappe/public/scss/desk/sidebar.scss

@@ -60,29 +60,6 @@ body {
 		width: 53px;
 		height: 100vh;
 	}
-
-	&:hover {
-		.body-sidebar {
-			// make it an overlay on hover
-			position: absolute;
-			width: 200px;
-
-			.sidebar-item-label {
-				display: flex;
-			}
-			.sidebar-item-control {
-				display: block;
-			}
-			.edit-sidebar-link {
-				display: block;
-			}
-		}
-
-		// show placeholder so that main section remains static
-		.body-sidebar-placeholder {
-			display: flex;
-		}
-	}
 }
 
 .body-sidebar {
@@ -104,8 +81,7 @@ body {
 
 		gap: 2px;
 		justify-content: flex-start;
-		overflow-x: hidden;
-		overflow-y: auto;
+		overflow: hidden;
 		padding: 15px;
 		position: static;
 		font-size: var(--text-base);
@@ -207,6 +183,60 @@ body {
 	}
 }
 
+@mixin body-sidebar-expanded {
+	.body-sidebar {
+		// make it an overlay on hover
+		position: absolute;
+		width: 200px;
+
+		.body-sidebar-top {
+			overflow-y: auto;
+		}
+		.sidebar-item-label {
+			display: flex;
+		}
+		.sidebar-item-control {
+			display: block;
+		}
+		.edit-sidebar-link {
+			display: block;
+		}
+	}
+
+	// show placeholder so that main section remains static
+	.body-sidebar-placeholder {
+		display: flex;
+	}
+}
+
+.body-sidebar-container.expanded {
+	@include body-sidebar-expanded();
+}
+
+@include media-breakpoint-down(sm) {
+	// body sidebar hidded in mobile view
+	.body-sidebar-container {
+		.body-sidebar {
+			width: 0px;
+			overflow: hidden;
+		}
+	}
+
+	// expands when navbar-brand is clicked
+	.body-sidebar-container.expanded {
+		.body-sidebar {
+			width: 200px;
+		}
+	}
+}
+
+@include media-breakpoint-up(sm) {
+	// for bigger screens, expand / collapse on hover
+	.body-sidebar-container:hover {
+		@include body-sidebar-expanded();
+	}
+}
+
 .app-switcher-dropdown {
 	.sidebar-item-control {
 		margin-top: -2px;