fix: ui on the sidebar

frappe/public/js/frappe/router.js

@@ -465,6 +465,9 @@ frappe.router = {
 			return "/desk/" + path_string;
 		}
 
+		if (params.length == 0) {
+			return "/desk";
+		}
 		// Resolution order
 		// 1. User's default workspace in user doctype
 		// 2. Private home

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

@@ -17,7 +17,7 @@
 			</div>
 			<div class="body-sidebar-bottom">
 				<div class="edit-mode bottom-edit-controls hidden">
-					<button class="btn btn-secondary btn-sm discard-button">
+					<button class="btn-outline btn-sm discard-button">
 						Discard
 					</button>
 					<button class="btn btn-primary btn-sm save-sidebar">

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

@@ -1,15 +1,9 @@
 
 <a class="sidebar-header" style="text-decoration: none; width: auto;">
 <div class="sidebar-item-icon header-logo-container" style="background-color: var({{ header_bg_color }});">
-    {% if (frappe.boot.app_name_style != "Title") { %}
     <div class="header-logo">
         {%= header_icon %}
     </div>
-    {% } else { %}
-    <div class="header-logo" style="padding: 0px;">
-        <img style="width: 32px; height: 32px;" src="{%= frappe.app.sidebar.app_logo_url %}">
-    </div>
-    {% }  %}
 </div>
 <div class="title-container">
 
@@ -20,12 +14,9 @@
             {%= workspace_title %}
         {% }  %}
     </div>
-    {% if (frappe.boot.app_name_style == "Subtitle") { %}
-
     <div class="sidebar-item-label header-subtitle">
         {%= frappe.app.sidebar.app_name %}
     </div>
-    {% } %}
 </div>
 <button class="btn-reset drop-icon show-in-edit-mode">
     <svg class="icon icon-sm" style="display: block;margin:auto;" aria-hidden="true">

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

@@ -11,7 +11,7 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 				label: __("Desktop"),
 				icon: "layout-grid",
 				onClick: function (el) {
-					frappe.set_route("desktop");
+					frappe.set_route("/desk");
 				},
 			},
 			{
@@ -26,8 +26,10 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 			{
 				name: "website",
 				label: __("Website"),
-				route: "/",
-				icon_url: "/assets/frappe/images/web.svg",
+				icon: "web",
+				onClick: function () {
+					window.open(window.location.origin);
+				},
 			},
 		];
 		this.make();
@@ -55,7 +57,6 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 				header_bg_color: this.header_stroke_color,
 			})
 		).prependTo(this.sidebar_wrapper);
-
 		this.wrapper = $(".sidebar-header");
 		this.dropdown_menu = this.wrapper.find(".sidebar-header-menu");
 		this.$header_title = this.wrapper.find(".header-title");
@@ -92,7 +93,7 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 	add_app_item(item) {
 		$(`<div class="dropdown-menu-item" data-name="${item.name}"
 			data-app-route="${item.route}">
-			<a>
+			<a ${item.href ? `href="${item.href}"` : ""}>
 				<div class="sidebar-item-icon">
 					${
 						item.icon
@@ -115,7 +116,6 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 			let current_item = this.dropdown_items.find((f) => f.name == name);
 			this.dropdown_menu.toggleClass("hidden");
 			this.toggle_active();
-			if (current_item.route) [window.open(current_item.route)];
 			current_item.onClick(item);
 		});
 	}

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

@@ -162,13 +162,20 @@ frappe.ui.sidebar_item.TypeSectionBreak = class SectionBreakSidebarItem extends
 	}
 	toggle_on_collapse() {
 		const me = this;
+		this.old_state;
 		$(document).on("sidebar-expand", function (event, expand) {
 			if (expand.sidebar_expand) {
 				$(me.wrapper.find(".section-break")).removeClass("hidden");
 				$(me.wrapper.find(".divider")).addClass("hidden");
+				if (me.old_state) {
+					me.collapsed = me.old_state;
+					me.toggle();
+				}
 			} else {
 				$(me.wrapper.find(".section-break")).addClass("hidden");
 				$(me.wrapper.find(".divider")).removeClass("hidden");
+				me.old_state = me.collapsed;
+				me.open();
 			}
 		});
 	}

frappe/public/scss/common/buttons.scss

@@ -135,3 +135,14 @@
 		background-color: var(--invert-neutral) !important;
 	}
 }
+.btn-outline {
+	background-color: var(--surface-white);
+	font-size: 14px;
+	line-height: 1.15;
+	letter-spacing: 0.02em;
+	font-weight: 420;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	border: 1px solid;
+	border-color: var(--outline-gray-2);
+}

frappe/public/scss/desk/sidebar.scss

@@ -250,15 +250,7 @@
 }
 .bottom-edit-controls {
 	display: flex;
-	gap: 4px;
-	& button {
-		flex: 1 1 50%;
-		background-color: #232323;
-	}
-	& .discard-button {
-		background-color: var(--navbar-bg);
-		border: 1px solid;
-	}
+	gap: 35%;
 }
 .body-sidebar-container[data-mode="edit"] {
 	.standard-sidebar-item:hover {

frappe/public/scss/desk/sidebar_header.scss

@@ -30,8 +30,6 @@
 }
 .header-title {
 	font-weight: 500;
-}
-[data-name-style="Subtitle"] {
 	line-height: 1;
 }
 
@@ -39,7 +37,7 @@
 	position: absolute;
 	top: 60px;
 	left: 9px;
-	width: 160px;
+	width: 92%;
 	padding: 6px;
 	border-radius: var(--border-radius-lg);
 	background: var(--surface-modal);

frappe/public/scss/espresso/_colors.scss

@@ -249,6 +249,7 @@ $light-yellow: #fef4e2;
 	--surface-pink-1: #fde8f5;
 	--surface-menu-bar: #f8f8f8;
 	--surface-modal: #ffffff;
+	--surface-white: #ffffff;
 	--ink-gray-1: #ededed;
 	--ink-gray-2: #e2e2e2;
 	--ink-gray-3: #c7c7c7;