From fa100f213e410946211613665c2b7595a5eb3ed0 Mon Sep 17 00:00:00 2001 From: th-94 Date: Thu, 16 Jul 2026 22:08:50 +0800 Subject: [PATCH 1/3] chore(sidebar): remove mouse focus state --- src/components/Sidebar/sidebar-item.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Sidebar/sidebar-item.css b/src/components/Sidebar/sidebar-item.css index 251124ffd..7aaaaab9d 100644 --- a/src/components/Sidebar/sidebar-item.css +++ b/src/components/Sidebar/sidebar-item.css @@ -6,11 +6,11 @@ } .sidebar-item.active, -.sidebar-item:hover { +.sidebar-item:hover, +.sidebar-item:focus-visible { background-color: var(--sgds-bg-translucent-subtle); } -.sidebar-item:focus, .sidebar-item:focus-visible { outline: var(--sgds-outline-focus); outline-offset: var(--sgds-outline-offset-focus); From 315b95ba599e58f0ba145c4a6c1923947542817a Mon Sep 17 00:00:00 2001 From: th-94 Date: Thu, 16 Jul 2026 22:11:20 +0800 Subject: [PATCH 2/3] fix(sidebar): update UI discrepancy --- src/components/Sidebar/sgds-sidebar-item.ts | 1 + src/components/Sidebar/sidebar-item.css | 13 +++++++++++++ src/components/Sidebar/sidebar.css | 7 ++++++- 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/sgds-sidebar-item.ts b/src/components/Sidebar/sgds-sidebar-item.ts index 25e5e9680..02fc707d2 100644 --- a/src/components/Sidebar/sgds-sidebar-item.ts +++ b/src/components/Sidebar/sgds-sidebar-item.ts @@ -26,6 +26,7 @@ export class SgdsSidebarItem extends SidebarElement { class=${classMap({ "sidebar-item": true, "sidebar-item--collapsed": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1, + "sidebar-item-leaf": this._childLevel > 2, active: this._selected })} @click=${() => this._handleClick()} diff --git a/src/components/Sidebar/sidebar-item.css b/src/components/Sidebar/sidebar-item.css index 7aaaaab9d..69be7554a 100644 --- a/src/components/Sidebar/sidebar-item.css +++ b/src/components/Sidebar/sidebar-item.css @@ -39,9 +39,22 @@ } .sidebar-item-label.offset { + color: var(--sgds-color-subtle); margin-left: var(--sgds-margin-2-xl); } +.sidebar-item-leaf.active .sidebar-item-label.offset, +.sidebar-item-leaf:hover .sidebar-item-label.offset, +.sidebar-item-leaf:focus-visible .sidebar-item-label.offset { + color: var(--sgds-color-default); +} + +.sidebar-item-leaf.active, +.sidebar-item-leaf:hover, +.sidebar-item-leaf:focus-visible { + background-color: var(--sgds-bg-translucent-subtle); +} + .sidebar-item-label-wrapper .sidebar-item.active { background-color: var(--sgds-surface-raised); color: var(--sgds-primary-color-default); diff --git a/src/components/Sidebar/sidebar.css b/src/components/Sidebar/sidebar.css index 79f2bef3a..d8c686024 100644 --- a/src/components/Sidebar/sidebar.css +++ b/src/components/Sidebar/sidebar.css @@ -6,8 +6,8 @@ z-index: var(--sgds-z-index-sticky); width: var(--sgds-dimension-288); transition: width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard); - } + .sidebar:not(.overlay).sidebar--collapsed { width: var(--sgds-dimension-72); } @@ -71,6 +71,11 @@ display: flex; flex-direction: column; gap: var(--sgds-gap-md); + margin-top: var(--sgds-margin-lg); +} + +slot[name="lower"]::slotted(*) { + margin-top: var(--sgds-margin-lg); } .sidebar-nested-overlay { From 9a7b050d3a143e5db3605b87ebbccf8ffbc3b912 Mon Sep 17 00:00:00 2001 From: th-94 Date: Thu, 16 Jul 2026 22:12:58 +0800 Subject: [PATCH 3/3] fix(sidebar): remove interaction for non-collapsible section label --- src/components/Sidebar/sgds-sidebar-section.ts | 7 +++++-- src/components/Sidebar/sidebar-section.css | 11 +++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/Sidebar/sgds-sidebar-section.ts b/src/components/Sidebar/sgds-sidebar-section.ts index 2188e6311..d37be1890 100644 --- a/src/components/Sidebar/sgds-sidebar-section.ts +++ b/src/components/Sidebar/sgds-sidebar-section.ts @@ -95,12 +95,15 @@ export class SgdsSidebarSection extends SidebarElement { > ${this.title !== "" ? html`
${this.title} ${this.collapsible diff --git a/src/components/Sidebar/sidebar-section.css b/src/components/Sidebar/sidebar-section.css index 50f0cd281..e46b8cfc5 100644 --- a/src/components/Sidebar/sidebar-section.css +++ b/src/components/Sidebar/sidebar-section.css @@ -7,7 +7,6 @@ display: flex; align-items: center; gap: var(--sgds-gap-2-xs); - cursor: pointer; font-size: var(--sgds-font-size-0); line-height: var(--sgds-line-height-20); color: var(--sgds-label-color-subtle); @@ -15,12 +14,16 @@ border-radius: var(--sgds-border-radius-md); } -.sidebar-section-label:hover { +.sidebar-section-label--collapsible { + cursor: pointer; +} + +.sidebar-section-label--collapsible:hover, +.sidebar-section-label--collapsible:focus-visible { color: var(--sgds-label-color-default); } -.sidebar-section-label:focus, -.sidebar-section-label:focus-visible { +.sidebar-section-label--collapsible:focus-visible { outline: var(--sgds-outline-focus); outline-offset: var(--sgds-outline-offset-focus); }