From a78aefdc5b75825ed3d2ab76135a3387b7419178 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 29 Dec 2025 04:06:14 +0530 Subject: [PATCH 1/2] fix: show alphabet icon in sidebar header --- frappe/desk/page/desktop/desktop.css | 4 ---- frappe/public/js/frappe/ui/sidebar/sidebar_header.js | 12 ++++-------- frappe/public/js/frappe/utils/utils.js | 5 +++-- frappe/public/scss/desk/sidebar_header.scss | 10 +++++++++- 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/frappe/desk/page/desktop/desktop.css b/frappe/desk/page/desktop/desktop.css index bc9884239a..049c0564d7 100644 --- a/frappe/desk/page/desktop/desktop.css +++ b/frappe/desk/page/desktop/desktop.css @@ -132,10 +132,6 @@ .icon-container:has(.icon){ background-color: var(--surface-gray-3); } -.icon-container .icon{ - width: 27px; - height: 27px; -} .icon-container:hover{ transform: scale(1.05); transition: transform 0.1s; diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_header.js b/frappe/public/js/frappe/ui/sidebar/sidebar_header.js index 5d2a5a4441..b91efca57f 100644 --- a/frappe/public/js/frappe/ui/sidebar/sidebar_header.js +++ b/frappe/public/js/frappe/ui/sidebar/sidebar_header.js @@ -147,14 +147,10 @@ frappe.ui.SidebarHeader = class SidebarHeader { this.header_icon = ``; } else if (this.sidebar.sidebar_data) { this.header_icon = this.sidebar.sidebar_data.header_icon; - this.header_icon = frappe.utils.icon( - this.header_icon, - "lg", - "", - "", - "", - false, - `var(${this.header_bg_color})` + this.header_icon = frappe.utils.desktop_icon( + this.sidebar.sidebar_title.charAt(0), + "gray", + "sm" ); } else { this.header_icon = this.get_default_icon(); diff --git a/frappe/public/js/frappe/utils/utils.js b/frappe/public/js/frappe/utils/utils.js index 52e274f377..0279e228bb 100644 --- a/frappe/public/js/frappe/utils/utils.js +++ b/frappe/public/js/frappe/utils/utils.js @@ -1276,11 +1276,12 @@ Object.assign(frappe.utils, { }, image_path: "/assets/frappe/images/leaflet/", }, - desktop_icon(letter, color) { + desktop_icon(letter, color, size) { + let icon_size = size ? size : "md"; let opacity_hex = "1A"; let icon_html = $(`
-
diff --git a/frappe/public/scss/desk/sidebar_header.scss b/frappe/public/scss/desk/sidebar_header.scss index 010a7cc060..dbbe8a23d5 100644 --- a/frappe/public/scss/desk/sidebar_header.scss +++ b/frappe/public/scss/desk/sidebar_header.scss @@ -19,7 +19,15 @@ .header-logo { width: 32px; height: 32px; - padding: 4px; + + & .icon-container { + padding: 4px; + border-radius: 10px; + width: 100%; + height: 100%; + display: flex; + align-items: center; + } & img { width: 100%; height: 100%; From 9921f06777613f9b2569d2d6bc40daf228ee4b33 Mon Sep 17 00:00:00 2001 From: sokumon Date: Mon, 29 Dec 2025 04:07:44 +0530 Subject: [PATCH 2/2] fix(sidebar): align avatar in collpased state --- frappe/public/scss/desk/sidebar.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss index 67e5fd7767..c92408b22c 100644 --- a/frappe/public/scss/desk/sidebar.scss +++ b/frappe/public/scss/desk/sidebar.scss @@ -143,7 +143,9 @@ } @include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1)); } - + .nav-item { + margin-left: -5px; + } .standard-items-sections { margin-top: 14px; .dropdown-notifications { @@ -164,6 +166,10 @@ left: 100%; } } + + .nav-item { + margin-left: 0px; + } } // show placeholder so that main section remains static