Merge pull request #35482 from sokumon/sidebar-fixes

fix: show alphabet icon in sidebar header

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;

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

@@ -147,14 +147,10 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 			this.header_icon = `<img src=${this.header_icon}></img>`;
 		} 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();

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 = $(`
 			<div class="icon-container">
-				<svg fill="currentColor" class="desktop-alphabet icon text-ink-gray-7 icon-lg" stroke=none style="" aria-hidden="true">
+				<svg fill="currentColor" class="desktop-alphabet icon text-ink-gray-7 icon-${icon_size}" stroke=none style="" aria-hidden="true">
 				<use class="" href="#${letter}"></use>
 				</svg>
 			</div>

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

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%;