diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss index 888245a..8defac9 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -94,6 +94,8 @@ $block: '.#{variables.$ns}composite-bar-item'; } &__collapse-item { + --_--item-icon-color: var(--g-color-text-misc); + display: flex; padding: 0 16px; align-items: center; @@ -101,6 +103,11 @@ $block: '.#{variables.$ns}composite-bar-item'; height: 100%; cursor: pointer; + &-icon { + color: var(--gn-aside-header-item-icon-color, var(--_--item-icon-color)); + margin-right: 10px; + } + #{$class}__title-adornment { margin-right: 0; } diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx index f66e389..830d0c6 100644 --- a/src/components/CompositeBar/Item/Item.tsx +++ b/src/components/CompositeBar/Item/Item.tsx @@ -297,7 +297,10 @@ function CollapsedPopup({ sortable={false} onItemClick={onClose} renderItem={(collapseItem) => { - const makeCollapseNode = ({title: titleEl}: MakeItemParams) => { + const makeCollapseNode = ({ + title: titleEl, + icon: iconEl, + }: MakeItemParams) => { const res = (
+ {iconEl} {titleEl}
); @@ -321,7 +325,15 @@ function CollapsedPopup({ }; const titleNode = renderItemTitle(collapseItem); - const params = {title: titleNode}; + const iconNode = collapseItem.icon && ( + + ); + + const params = {title: titleNode, icon: iconNode}; const opts = { compact: Boolean(compact), collapsed: true,