fix(sidebar): add icon to expanded section, fix icon-rail callbacks, fix active border
- Render icon between chevron and label in expanded SidebarSection - Remove !open guard from icon-rail click — always fire both callbacks - Add border-left: 3px solid transparent to .treeSection so .treeSectionActive border-left-color takes effect - Remove duplicate .treeSectionLabel CSS declaration Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -205,15 +205,7 @@
|
|||||||
padding: 0 6px 6px;
|
padding: 0 6px 6px;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
}
|
border-left: 3px solid transparent;
|
||||||
|
|
||||||
.treeSectionLabel {
|
|
||||||
padding: 10px 12px 4px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: var(--sidebar-muted);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Collapsible section toggle */
|
/* Collapsible section toggle */
|
||||||
|
|||||||
@@ -97,14 +97,14 @@ function SidebarSection({
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
// Expand sidebar and open the section
|
// Expand sidebar and open the section
|
||||||
onCollapseToggle?.()
|
onCollapseToggle?.()
|
||||||
if (!open) onToggle()
|
onToggle()
|
||||||
}}
|
}}
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
if (e.key === 'Enter' || e.key === ' ') {
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
onCollapseToggle?.()
|
onCollapseToggle?.()
|
||||||
if (!open) onToggle()
|
onToggle()
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -124,6 +124,7 @@ function SidebarSection({
|
|||||||
>
|
>
|
||||||
{open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
{open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||||
</button>
|
</button>
|
||||||
|
{icon && <span className={styles.sectionIcon}>{icon}</span>}
|
||||||
<span className={styles.treeSectionLabel}>{label}</span>
|
<span className={styles.treeSectionLabel}>{label}</span>
|
||||||
</div>
|
</div>
|
||||||
{open && children}
|
{open && children}
|
||||||
|
|||||||
Reference in New Issue
Block a user